vue/cli4 项目中配置webpack-bundle-analyzer分析包插件，查找需要优化的文件

分手后的思念是犯贱 2021-07-26 13:14 453阅读 0赞

@vue/cli 4 项目中安装 webpack-bundle-analyzer 分析包，来查找需要优化的文件  
1、简介及安装  
2、修改 vue.config.js和 package.json  
3、运行分析工具

在安装 webpack-bundle-analyzer 分析包之前，在项目中可以通过 npm list vue 查看项目所使用的 @vue 版本以及运行 vue -V 查看项目所使用的 @vue/cli 版本。

![20201011143928169.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

![2020101114395176.png_pic_center][]

### 1、简介及安装 ###

**webpack-bundle-analyzer** 可视化资源分析工具可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等。

在终端或 DOS 命令窗口中输入以下的命令行先安装 webpack-bundle-analyzer

npm install webpack-bundle-analyzer -D

### 2、修改 vue.config.js和 package.json ###

文件位置

![20201011142255841.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

*① 修改 vue.config.js文件，代码如下：*

module.exports = {
      chainWebpack: config => {
        if (process.env.use_analyzer) {     // 分析
          config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }
      },

在修改 package.json 文件之前，先安装 `cross-env` 。

npm install --save-dev cross-env

因为像 `NODE_ENV = production` 这样设置环境变量时，大多数 Windows 命令提示符都会阻塞 ，而 `cross-env` 使得我们可以使用单个命令，而不必担心为平台正确设置或使用环境变量。

*② 修改 package.json，代码如下：*

"scripts": {
        "analyzer": "cross-env use_analyzer=true npm run build"
      },

`注意` `后面的 npm run build 也可以是 npm run dev，就看你是想在运行项目还是打包的时候使用 webpack-bundle-analyzer 分析包了`

### 3、运行分析工具 ###

npm run analyzer 或 npm run build

等待运行成功之后会看到如下面的图（结果太长，截取的图片）所示结果，以及项目中多了 `dist` 文件夹。

![20201011152938846.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

![20201011144433952.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

DONE  Build complete. The dist directory is ready to be deployed.
     INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

在浏览器中打开 *http://127.0.0.1:8888/* ：

![20201011142923330.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

图中占面积越大的文件，其文件的大小越大，部署到服务器之后，在浏览器中加载的时间越长，点击左上角的像箭头一样的符号可以直接查看各个文件的大小。

![20201011142104837.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center][]

得到可视化的分析结果之后，接下来就对占比比较大或者依赖程度比较高的文件进行优化了。

想要深度学习 `webpack-bundle-analyzer` 可以前往下面的链接：

> [https://www.npmjs.com/package/webpack-bundle-analyzer][https_www.npmjs.com_package_webpack-bundle-analyzer]

[20201011143928169.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/7f28bb64410844f5afc2ce047e5d4cf4.png
[2020101114395176.png_pic_center]: /images/20210726/e45c31a175494de9947bf73bf96a8d2d.png
[20201011142255841.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/6e2b5e49b0654c168eb297001197759e.png
[20201011152938846.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/99ae4a9451f34eefade0558ed4705782.png
[20201011144433952.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/98f0df2fe6df4b27ba156c832f4dca15.png
[20201011142923330.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/6b9f6ef54a23412ba19feab9211c2b09.png
[20201011142104837.png_x-oss-process_image_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM5NzMxOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210726/0b4de57078ea4f53aa898350dbf34b48.png
[https_www.npmjs.com_package_webpack-bundle-analyzer]: https://www.npmjs.com/package/webpack-bundle-analyzer