如何分析前端打包体积
Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 755 (opens in a new tab)
Author 回答者: WenReq (opens in a new tab)
- 安装用于分析包的模块
npm install webpack-bundle-analyzer --save-dev- vue.config.js 新增内容
module.exports = {
chainWebpack: (config) => {
if (process.env.analyzer) {
config
.plugin("webpack-bundle-analyzer")
.use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
}
},
};- package.json 新加一条 script -- "analyzer"
"scripts": {
"analyzer": "set analyzer=true && vue-cli-service build"
}- 命令行下输入
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 }));
},
};Author 回答者: 1138943712 (opens in a new tab)
在最新的的vue-cli里面 我这个4.5版本里面
在package.json的script 打包的时候加上--report
report:prod": "vue-cli-service build --report
Author 回答者: shfshanyue (opens in a new tab)
在 webpack 中，可以使用 webpack-bundle-analyzer (opens in a new tab) 分析打包后体积分析。
其原理是根据 webpack 打包后的 Stats (opens in a new tab) 数据进行分析，在 webpack compiler 的 done hook (opens in a new tab) 进行处理，见源码 (opens in a new tab)
compiler.hooks.done.tapAsync("webpack-bundle-analyzer", (stats) => {});在默认配置下，webpack-bundle-analyzer (opens in a new tab) 将会启动服务打开一个各个 chunk 下各个 module 占用体积的可视化图。
你可以通过它，找到在在打包中占用体积最大的模块，并进行优化。
在查看页面中，有三个体积选项：
stat: 每个模块的原始体积parsed: 每个模块经 webpack 打包处理之后的体积，比如 terser 等做了压缩，便会体现在上边gzip: 经 gzip 压缩后的体积
ANALYZE 环境变量
在实际项目中，往往通过环境变量 ANALYZE 配置该插件，代码如下，可见bundle-analyze/build.js (opens in a new tab)。
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