VUE首屏加载优化 性能优化分析插件安装分享

优化背景： 项目上线后 第一次进入项目要等待接近50s才能进入页面。一开始觉得是电脑配置问题或者网络问题。F12后发现加载资源过慢 其中一个chunk-***js文件有10m 加载了45s 。我们使用的是2m带宽 ，实际下载速度200kb/s上下。 差不多是要50s左右。所以想知道为啥这个js这么大，需要安装一个打包分析插件。-webpack-bundle-analyzer

第一步 ：在项目中下载 

　　安装 npm install webpack-bundle-analyzer –save-dev

第二步：配置

　1、　在vue.config.js 文件中 加入

  chainWebpack: config => {

            if (process.env.use_analyzer) { // 分析

                config

                .plugin('webpack-bundle-analyzer')

                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

            }

    },

是在chainWebpack 这个属性里面加入

2、还需要在package.json 里面加入命令行

    "scripts": {

        "serve": "vue-cli-service serve --host 0.0.0.0",

        "build": "vue-cli-service build",

        "analyzer": "cross-env use_analyzer=true npm run build"   //新增的这行

    },

第三步：执行

然后再终端输入命令 npm run analyzer  会发现保存 是因为少下了一个插件 cross-env 使得您可以使用单个命令

npm i cross-env 之后再执行npm run analyzer

等打包完后会出现分析包界面

然后根据哪几个插件占比比较大 进行拆分 和按需加载