vue中如何通过webpack-bundle-analyzer打包分析工具进行配置优化

vue中随着项目的不断功能迭代和开发,项目文件越来越多,项目的打包文件也越来越大。如何对打包文件进行分析优化,减小打包文件大小呢?可以通过webpack-bundle-analyzer 这个打包分析工具进行解决。

1、webpack-bundle-analyzer的安装

通过执行 yarn add -D webpack-bundle-analyzer 命令安装插件。

bash 复制代码
yarn add -D webpack-bundle-analyzer

2、vue.config.js配置文件设置

在vue.config.js配置文件中增加webpack-bundle-analyzer插件配置。只有环境变量ANALAYZ为TRUE时才进行打包分析。

javascript 复制代码
module.exports = {
  chainWebpack: (config) => {
    
    if (process.env.ANALAYZ) {  
      config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);  
    }
  },
};

3、在package.json文件汇总添加analyz分析命令

在package.json配置文件中添自定义的analyz命令。

javascript 复制代码
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyz": "cross-env ANALAYZ=true vue-cli-service build"
},

4、执行analyz分析命令

允许yarn analyz 执行打包分析命令,执行完毕后,访问http://127.0.0.1:8888/地址即可查看最终生成的打包分析包。图中占面积越大的文件,其文件的大小越大。也可左侧的箭头打开文件列表查看每个文件的具体大小。


新时代农民工

相关推荐
whltaoin14 分钟前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学1 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室3 小时前
CSS高效开发三大方向
前端·css
昔人'3 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾4 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶5 小时前
Starting again-02
开发语言·前端·javascript
Apifox.6 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·人工智能·后端·http·ai·测试用例·postman
Kitasan Burakku6 小时前
Typescript return type
前端·javascript·typescript
叁佰万6 小时前
前端实战开发(一):从参数优化到布局通信的全流程解决方案
前端
笔尖的记忆6 小时前
js异步任务你都知道了吗?
前端·面试