前端打包体积分析和产物优化（webpack-bundle-analyzer)

客官°小女子只卖身不卖艺 2024-03-22 09:04 12阅读 0赞

## 问题背景 ##

React或Vue项目打包后，有时产物体积非常大。为了优化项目，我们一般从以下几个方面考虑。

1.  每个chunk的大小是多少？
2.  哪个chunk体积最大？
3.  应该如何优化体积大的chunk？

## 安装插件 ##

npm install --save-dev webpack-bundle-analyzer

### 配置插件 ###

#### 1.找到webpack配置文件 ####

找到你的项目中的webpack配置文件，文件名一般为`webpack.config.js`

![在这里插入图片描述][307945de209c4a68b1e582be3e0961bc.png]

#### 2.引入插件 ####

在webpack.config.js文件最上面，引入刚刚下载的插件：

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

#### 3.修改plugin对象 ####

找到`plugins`数组（在`module.exports`对象中），并在其中添加一个新的**BundleAnalyzerPlugin**实例。

下面的示例，将该插件添加到**生产环境**配置中：

// ...
    plugins: [
      // ...
      process.env.NODE_ENV === 'production' && new BundleAnalyzerPlugin(),
    ].filter(Boolean),
    // ...

这段代码会在生产环境构建时启用webpack-bundle-analyzer插件。

#### 开始构建 ####

执行npm run build。浏览器会自动打开一个网页，展示每个chunk的体积。

npm run build

网页如下图所示：  
![在这里插入图片描述][9a8b2b0974be457c88c26a8a3354930b.png]

### 打包产物优化 ###

例如上面的打包产物中，`react-dom`是**体积最大**的chunk。我们能否不将它打包到最终的产物中？而是通过cdn的方法引入？

#### 通过external排除依赖 ####

修改`config/webpack.config.js`文件：（这里以`ReactDOM`为例，其他的包，例如`Vue，React，VueX`都是同理)

// ...
    module.exports = {
        
      // ...
      externals: {
        
        'react-dom': 'ReactDOM',
      },
      // ...
    };

#### 再次查看打包文件 ####

执行`npm run build`，可以发现react-dom没有被打包进来。打包产物的包**体积缩小**了。  
![在这里插入图片描述][be182281918d4a61b01ece58d4218579.png]

#### 通过CDN引入包 ####

通过上面的例子可以看出，通过external可以在打包的时候，忽略指定的包。但实际项目中我们需要导入这些包，应该从哪下载这些包呢？答案是，通过`<script>`脚本来导入这些包。由于CDN可以加速，所以在打包时，可以排除常用的包（例如`Vue，VueX，react-dom`)，然后通过CDN方式引入。如此一来，请求静态资源的速度就会快很多。

还是以react-dom为例：修改`public/index.html`

<!DOCTYPE html>
    <html lang="en">
      <head>
        
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    
        
        <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
      </body>
    </html>

[307945de209c4a68b1e582be3e0961bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/13cc08be4cfa441ea821e0f3d8d20dd7.png
[9a8b2b0974be457c88c26a8a3354930b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d4a47f3f1c354acb8c31429bbcc975c2.png
[be182281918d4a61b01ece58d4218579.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0c80d067ce0c42018814e6a1d59c2555.png