可视化分析包大小 webpack-bundle-analyzer

可视化分析包大小 webpack-bundle-analyzer

它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。

• 分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何
• 步骤如下：
  1. 安装：npm install webpack-bundle-analyzer --save-dev
  2. 配置：

• webpack.config.js:

// 分析包内容 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 
module.exports = { 
plugins: [ 
// 开启 BundleAnalyzerPlugin 
new BundleAnalyzerPlugin(), 
    ], 
};   

• feflow.js:(如果使用fellow框架)

// 扫描 bundle 并构建其内部内容的可视化 npm run analyze
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

builderOptions.webpackConfig.config.plugins.push(
// 开启 BundleAnalyzerPlugin
new BundleAnalyzerPlugin(),

);

3. 在package.json中的script中补上：

"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build”

4. 运行： npm run analyze

最后 http://127.0.0.1:8888

第三步这一点补充一下：换了一台电脑后，只需要 npm run build即可，会自动打开http://127.0.0.1:8888/

5. 效果如下：