Webpack系列——打包分析

可以通过运行 webpack --profile --json > stats.json 来生成此工具所需的 JSON 文件

{
    ...
    "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server --config ./build/webpack.dev.config.js",
    "build": "webpack --config ./build/webpack.prod.config.js",
    "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
    ...
}

如果我们以分离代码作为开始，那么就应该以检查模块的输出结果作为结束，对其进行分析是很有用处的。官方提供分析工具 是一个好的初始选择。下面是一些可选择的社区支持(community-supported)工具：

• webpack-chart：webpack stats 可交互饼图。

• webpack-visualizer：可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的。

• webpack-bundle-analyzer：一个 plugin 和 CLI 工具，它将 bundle 内容展示为便捷的、交互式、可缩放的树状图形式。

• webpack bundle optimize helper：此工具会分析你的 bundle，并为你提供可操作的改进措施建议，以减少 bundle 体积大小。