vlambda博客
学习文章列表

「前端工程化」系列正在更新: 10/38。

好吧，最近又开始更新了，补一些以前没有的。

可查看原文链接前往 https://q.shanyue.tech/engineering/ 查看前端工程化系列文章。每篇文章都有视频讲解以及多次校验。

每天晚上九点在 B 站直播讲解工程化系列文章，欢迎在 B 站关注程序员山月。

在 webpack 中，可以使用 webpack-bundle-analyzer¹ 分析打包后体积分析。

其原理是根据 webpack 打包后的 Stats² 数据进行分析，在 webpack compiler 的 done hook³ 进行处理，见源码⁴

https://webpack.js.org/api/stats/#root

     

https://webpack.js.org/api/compiler-hooks/#done

     

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/src/BundleAnalyzerPlugin.js#L75

     

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

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

https://github.com/webpack-contrib/webpack-bundle-analyzer

     

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

在查看页面中，有三个体积选项：

1. stat: 每个模块的原始体积

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

3. gzip: 经 gzip 压缩后的体积

ANALYZE 环境变量

在实际项目中，往往通过环境变量 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