前端开发

webpack优化二：打包分析

背景

webpack4.x新增了更加便利的splitChunks（文档翻译），可以帮助我们对项目的js进行提取分割，以便更好的长效缓存。但是提取规则是否合适，我们希望提取的模块是否按照预期进行，是否有可视化的插件可以明确的展示给我们？

工具

webpack-bundle-analyzer是一个可以把webpack打包输出的bundles以可视化的块状图展示每个modules的输出大小及来源路径。

安装

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

或者

1
yarn add -D webpack-bundle-analyzer

配置

webpack配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  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'
    })
  ]
}

添加脚本：

1
2
3
scripts: {
  "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

在npm run build之后会展示资源的打包情况。