Open shfshanyue opened 2 years ago
在最新的的vue-cli里面 我这个4.5版本里面
在package.json的script 打包的时候加上--report
report:prod": "vue-cli-service build --report
在 webpack 中,可以使用 webpack-bundle-analyzer 分析打包后体积分析。
其原理是根据 webpack 打包后的 Stats 数据进行分析,在 webpack compiler 的 done hook 进行处理,见源码
compiler.hooks.done.tapAsync('webpack-bundle-analyzer', stats => { });
在默认配置下,webpack-bundle-analyzer 将会启动服务打开一个各个 chunk 下各个 module 占用体积的可视化图。
你可以通过它,找到在在打包中占用体积最大的模块,并进行优化。
在查看页面中,有三个体积选项:
stat
: 每个模块的原始体积parsed
: 每个模块经 webpack 打包处理之后的体积,比如 terser 等做了压缩,便会体现在上边gzip
: 经 gzip 压缩后的体积在实际项目中,往往通过环境变量 ANALYZE
配置该插件,代码如下,可见bundle-analyze/build.js。
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
如果需要修改默认端口,可按如下修改配置