性能分析webpack-bundle-analyzer及其优化打包

一、webpack-bundle-analyzer

通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化。

1.安装

npm install --save-dev webpack-bundle-analyzer

2.在webpack.config.js中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
new BundleAnalyzerPlugin(
           {
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8889,
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
                }
       ),
]

如下图：

3.在package.json的scripts里加入下面这句话：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

analyzerMode:'server'，可以是server，static，json，disabled。在server模式下，分析器将启动HTTP服务器来显示软件包报告。在“静态”模式下，会生成带有报告的单个HTML文件。在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件。
analyzerHost: '127.0.0.1', 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888, 端口号。
reportFilename: 'report.html', 路径捆绑，将在static模式下生成的报告文件。相对于捆绑输出目录。
defaultSizes: 'parsed'，默认显示在报告中的模块大小匹配方式。应该是stat，parsed或者gzip中的一个。
openAnalyzer: true：在默认浏览器中自动打开报告。
generateStatsFile:false: 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成。
statsFilename: 'stats.json', 相对于捆绑输出目录。
statsOptions: null，stats.toJson()方法的选项。例如，您可以使用source：false选项排除统计文件中模块的来源。在这里查看更多选项：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
logLevel: 'info'，日志级别，可以是info, warn, error, silent。
excludeAssets:null，用于排除分析一些文件

4.运行结果如下图：

二、进行优化

一个简单详细的优化：vue element-ui 优化打包 bundle js 大小