关于vue.js:如何优化-Vue-祖传代码

前言

“这页面加载也太慢了！”，一个平静的下午就此突破，在老板和 PM 的 威逼利诱之下 ，我开始了对这个祖传(shi)山我的项目进行了优化，因为这个我的项目传到我手上至多通过了4-5代前端了，很多货色也不敢随便删，找不到负责人。

为什么要优化？

咱们次要看首屏加载速度，在测试环境咱们我的项目其实跑得还是蛮快，然而生产环境是用印尼比拟差的服务器，再加上须要 kexue 上网（总是网络呈现稳定），在这次 UI 2.0 上线之后，沉积的货色终于越来越多，我的项目也越来越宏大。毫不夸大的说咱们当初应用 4G 首次关上页面的速度大略在 16 秒以上，依据上面的表格推断出客户流失率，可是在印尼还在用着 3G 网络，可想而知这流失率太恐怖了。并且这是一个 C 端产品，所以要更加思考用户体验了

客户期待页面时长的流失率

作为一个开发者，你对首页关上速度又有多高的要求呢？

从哪里开始下手

在察看了这个我的项目架构之后呢，我推断出以下几个可行计划

对于代码打包进行压缩
破除以前不该用到的组件及页面
应用 CDN 引入局部资源
优化路由，批改引入形式

对于这几个优化计划，也是试了一遍又一遍。的确是成果挺大的才收回来给大家围观一下

当初开始

记住这张图中三个比拟大的文件 size, 咱们每进行一步计划就看看成果

1.代码压缩

代码压缩是一个很不错抉择，咱们首先须要下载一些依赖

css 代码压缩 (optimize-css-assets-webpack-plugin)

下载

npm install optimize-css-assets-webpack-plugin

webpack.config.js 应用

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');plugins: [    new OptimizeCSSPlugin()]

js 代码压缩 (uglifyjs-webpack-plugin)

下载

npm install optimize-css-assets-webpack-plugin

webpack.config.js 应用

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins:[      new UglifyJsPlugin({      cache: true,   // 开启缓存      parallel: true, // 开启多线程编译      sourceMap: true,  // 是否sourceMap      uglifyOptions: {  // 美化参数        comments: false,        warnings: false,        compress: {          unused: true,          dead_code: true,          collapse_vars: true,          reduce_vars: true        },        output: {          comments: false        }      }    }),]

开启gzip

装置

npm install compression-webpack-plugin

webpack.config.js 应用

const CompressionWebpackPlugin = require('compression-webpack-plugin')plugins:[    new CompressionWebpackPlugin({      asset: '[path].gz[query]',      algorithm: 'gzip',      test: new RegExp(        '\\.(' +        ['js', 'css'].join('|') +        ')$'      ),      threshold: 10240,      minRatio: 0.8    })]

nginx 配置

gzip on;gzip_static on;gzip_min_length 1k;gzip_buffers 4 32k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types text/plain application/x-javascript text/css application/xml;gzip_vary on;gzip_disable "MSIE [1-6].";

先看看成果

咱们在第一步就差不多缩小了 1/2 的大小

接着往下看

2.删除一些废除的页面

这个我的项目因为之前是始终迭代过去的，在后面也有讲到，然而我还是下定决心删除它们，在截取了一系列屏之后，我找到了老员工与 PM 来确认页面是否曾经废除，这个环境比拟费时间，这上面的表格就是一个个确认进去的

在删除这些路由之后我从新进行了打包，请看上面，还是有点成果的嘛，但这并没有达到我的预期成果

3. 应用cdn开始性能优化

咱们以后应用了 mint ui 库，vue 全家桶一系列玩意，咱们找到对应的 cdn 在index.html中引入

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/mint-ui/2.2.9/actionsheet/index.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.8/vue-router.common.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.22.1/vue-i18n.common.js"></script>

引入完之后呢？将不须要打包的资源进行相应的配置，所以咱们须要在 webpack.config.js 中写上

externals:{    'vue':'Vue',    'mint-ui':'MINT',    'axios':'axios',    'vue-router':'VueRouter',    'vue-i18n':'VueI18n',},

这样就能够用来疏忽这些资源了

4.批改路由引入形式

老严将页面的组件（去除之前删除的页面）数了一下是 73个，个别应用 import 引入的写法，当我的项目打包时路由里的所有 component 都会打包在一个js中，在我的项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢

import 引入

import DetailActivityStatic from '@/components/discover/share/DetailActivityStatic'export default [    {        path: "/discover/DetailActivityStatic",        component: DetailActivityStatic    }]

当初老严全副改为应用 require

export default [    {        path: "/discover/DetailActivityStatic",        component: resolve => require(['@/components/discover/share/DetailActivityStatic'], resolve)    }]

这个环节也有点累，因为页面切实太多了，上面是打包后的成果

咱们惊奇的发现 js的确小了挺多，那么这些这些内容去哪了？咱们也没有删除啊

在js文件夹中，咱们发现了好多个单个js，这是为什么呢？

因为用 require 会将 component 别离打包成不同的js，按需加载，拜访此路由时才会加载这个js，所以就防止进入首页时加载内容过多。

所噶，到此为止咱们优化做完了。咱们来看看成果吧!

后果

来看看成果吧！

有些认真的敌人会发现，这个app.js 与 vendor.js 怎么会变得比刚刚还小呢？

因为咱们得第一步压缩代码外面做了 gzip 压缩

当初首屏关上基本上管制在 1-3s 左右浮动了

相比之前的 16s 几乎不要强太多，PM 与老板直呼 “这也太快了！啊啊啊~”

目录

前言

为什么要优化？

从哪里开始下手

当初开始

1.代码压缩

2.删除一些废除的页面

3. 应用cdn开始性能优化

4.批改路由引入形式

后果