webpack-bundle-analyzer分析SPA应用

怼烎@ 2023-06-06 10:41 123阅读 0赞

介绍 webpack-bundle-analyzer 这个插件来分析SPA应用。

使用

> npm install --save-dev webpack-bundle-analyzer
> 
> 在webpack的plugins中配置： new BundleAnalyzerPlugin()
> 
> 在package.json 中增加： "analyz": "NODE\_ENV=production npm\_config\_report=true npm run build"

npm run analyz  后会自动打开 http://127.0.0.1:8888/ ，视图如下：

![format_png][]

vendor包属于工程基础包，里面包含了node\_modules下的依赖模块，因为这些依赖是比较稳定的，所以可以配合ETag做http层的缓存。

use-repeat包属于业务基础包，里面包含业务场景常用到依赖和工具，打入此包的前提：在应用中重复使用大于等于3次。

为什么需要分出 工程基础包 和 业务基础包？

> 工程基础包是整个工程常用的node\_modules的依赖，这里的内容不会经常变动，所以单独抽出来并且搭配ETag来实现缓存是常用的spa 优化方案。
> 
> 业务基础包大部分不是node\_modules的模块，例如我们在common中存放的一些基础组件，其次是一些三方的组件库（这些是在node\_modules中的，但是因为经常变动所以不适宜放在vendor中）。如果业务基础包不进行提取会导致单chunk包重复打包相同模块，也增加了单chunk包的体积。

对应的webpack配置如下：

>     // 工程基础包
> 
>       new webpack.optimize.CommonsChunkPlugin(\{
> 
>             name: 'vendor',
> 
>             minChunks: function (module, count) \{
> 
>           return (module.resource && /\\.js$/.test(module.resource) &&                     module.resource.indexOf(path.join(\_\_dirname, '../node\_modules')) === 0)
> 
>         \}
> 
>       \})

>     // 业务基础包
> 
>       new webpack
> 
>       .optimize
> 
>       .CommonsChunkPlugin(\{
> 
>             async: 'use-repeat',
> 
>             minChunks: (module, count) => (count >=3)
> 
>       \})

到此还不算结束，因为如果要配合ETag做缓存，需要保证打出来包hash不能改变，下面是常见的output 配置：

> output: \{
> 
>     path: path.join(\_\_dirname, '../dist'),
> 
>     filename: '\[name\]-\[chunkhash\].js',
> 
>     chunkFilename: '\[name\]-\[chunkhash\].chunk.js'
> 
>   \}

hash 是 build-specific ，即每次编译都不同——适用于开发阶段

chunkhash 是 chunk-specific，是根据每个 chunk 的内容计算出的 hash——适用于生产

使用chunkhash就保险了吗？

这里涉及到三个问题：1.webpack运行文件 2.module id  3.chunk id ， 解决方案如下：

>     // 将webpack运行文件抽离出来，不然每次打包运营文件的hash都会改变
> 
>   new webpack.optimize.CommonsChunkPlugin(\{
> 
>      name: 'runtime'
> 
>   \})

> // 固定module id
> 
>  new webpack.HashedModuleIdsPlugin(\{
> 
>       hashFunction: 'md5',
> 
>       hashDigest: 'hex',
> 
>       hashDigestLength: 8
> 
>  \})
> 
>

> // 固定chunk id
> 
> new webpack.NamedChunksPlugin((chunk) => \{
> 
>         // 解决异步模块打包的问题
> 
>         if (chunk.name) \{
> 
>           return chunk.name;
> 
>         \}
> 
>         return chunk.modules.map(m => path.relative(m.context, m.request)).join("\_");
> 
> \})

转载：[https://www.jianshu.com/p/dbc22947a66d][https_www.jianshu.com_p_dbc22947a66d]

[format_png]: /images/20230601/1d932118fa02487d97683ed78c4efb11.png
[https_www.jianshu.com_p_dbc22947a66d]: https://www.jianshu.com/p/dbc22947a66d