极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

# 如何分析前端打包体积

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 755 (opens new window)

Author

回答者: wenreq (opens new window)

  1. 安装用于分析包的模块
npm install webpack-bundle-analyzer --save-dev
  1. vue.config.js 新增内容
module.exports = {
  chainWebpack: (config) => {
    if (process.env.analyzer) {
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
  },
};
  1. package.json 新加一条 script -- "analyzer"
"scripts": {
  "analyzer": "set analyzer=true && vue-cli-service build"
}
  1. 命令行下输入
npm run analyzer

如果需要修改默认端口,可按如下修改配置

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  chainWebpack: (config) => {
    if (process.env.analyzer)
      config
        .plugin("webpack-bundle-analyzer")
        .use(new BundleAnalyzerPlugin({ analyzerPort: 7888 }));
  },
};

在最新的的 vue-cli 里面 我这个 4.5 版本里面 在 package.json 的 script 打包的时候加上--report report:prod": "vue-cli-service build --report

在 webpack 中,可以使用 webpack-bundle-analyzer (opens new window) 分析打包后体积分析。

其原理是根据 webpack 打包后的 Stats (opens new window) 数据进行分析,在 webpack compiler 的 done hook (opens new window) 进行处理,见源码 (opens new window)

compiler.hooks.done.tapAsync("webpack-bundle-analyzer", (stats) => {});

在默认配置下,webpack-bundle-analyzer (opens new window) 将会启动服务打开一个各个 chunk 下各个 module 占用体积的可视化图。

image.png

你可以通过它,找到在在打包中占用体积最大的模块,并进行优化。

在查看页面中,有三个体积选项:

  1. stat: 每个模块的原始体积
  2. parsed: 每个模块经 webpack 打包处理之后的体积,比如 terser 等做了压缩,便会体现在上边
  3. gzip: 经 gzip 压缩后的体积

# ANALYZE 环境变量

在实际项目中,往往通过环境变量 ANALYZE 配置该插件,代码如下,可见bundle-analyze/build.js (opens new window)

const webpack = require("webpack");
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 1. BundleAnalyzerPlugin 是如何工作的?
// 2. Stat、Parsed、Gziped 分别是何意义?
// 3. terserplugin 对此结果有影响吗?

function f1() {
  return webpack({
    entry: "./index.js",
    mode: "none",
    plugins: [process.env.ANALYZE && new BundleAnalyzerPlugin()],
  });
}

f1().run((err, stat) => {});

在打包时,通过制定环境变量即可分析打包体积

ANALYZE=true npm run build
Last Updated: 4/27/2022, 11:56:45 AM