webpack 分析项目打包体积

August 01, 2022

1、安装 webpack-bundle-analyzer

yarn add webpack-bundle-analyzer -D

2、配置

vue-cli 在 vue.config.js 中是这样子：

module.exports = {
  chainWebpack: config => {
    config
      .plugin("webpack-bundle-analyzer")
      .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin)
  },
}

webpack 中是这样子：

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
}

3、启动

yarn serve --report

或者：

npm run build --report

4、查看

http://127.0.0.1:8888/ eg1