Skip to main content

性能分析工具

WebpackBar​

Nuxt.js 团队出品的打包进度条。

speed-measure-webpack-plugin​

可以看到每个 loader 和 plugin 的耗时情况，然后对其进行优化。

webpack-bundle-analyzer​

以可视化的方式让我们直观地看到打包的bundle中到底包含哪些模块内容，以及每一个模块的体积大小。我们可以根据这些信息去分析项目结构，调整打包配置，进行优化。

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    process.env.ANALYZE === "true" &&
      new BundleAnalyzerPlugin()
  ].filter(Boolean),
}

然后添加一个 npm script：

{
  "scripts": {
    "serve": "webpack",
    "analyze": "cross-env ANALYZE=true webpack"
  }
}