vue项目首屏加载优化实战

时间 2019-11-09

标签 vue 项目加载优化实战繁體版

原文原文链接

问题

单页面应用的一个问题就是首页加载东西过多，加载时间过长。特别在移动端，单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中作的一些优化，但愿你们可以相互讨论，共同进步。css

个人项目vue-cli3构建的，vue+vue-router+vuex，UI框架选用 element-ui，ajax方案选用 axios，服务器使用Nginx。用到的这些技术都是如今用的比较普遍的，看到这篇文章，我估计你和我用的技术应该差很少。html

第一步：webpack-bundle-analyzer 分析

首页咱们来看看没有通过任何优化的打包分析，vue-cli3的项目直接vue-cli-service build --report就会生成一个report.html，打开这个html就能看到，不是vue-cli3的项目须要自行安装这个插件，参考连接，点击。vue

如上图所示在vendor比较大的文件有element，moment，echart，还有jquery，而后还有一些没见过的vue-qriously这些组件，接下来咱们来一步一步让vendor变小jquery

第二步：初步优化

1. 仔细考虑组件是否须要全局引入webpack

在咱们的main.js，我发现有不少组件被全局引入，其中有些组件只有1，2个页面用到，这些组件不须要所有引入ios

import ImageComponent from 'COMMON/imageComponent'
import InfiniteLoading from 'COMMON/infiniteLoading'
import SearchDialog from 'COMMON/SearchDialog'
import BasicTable from 'COMMON/BasicTable'
import VueQriously from 'vue-qriously'

Vue.use(ImageComponent)
Vue.use(InfiniteLoading) // 能够去除
Vue.use(SearchDialog) // 能够去除
Vue.use(BasicTable)  // 能够去除
Vue.use(VueQriously)  // 能够去除

上面一段代码是咱们main.js中的代码，其中ImageComponent是用来处理图片的，用到的页面不少，其余的组件都只要较少的页面用到，咱们在main.js中删除，移到具体的页面中去。git

2. 手动引入 ECharts 各模块github

默认引入 ECharts 是引入所有的```import * as ECharts from 'echarts' ```咱们只须要部分组件，只需引入本身须要的部分。参考地址，点击web

import VueECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'

3.使用更轻量级的工具库ajax

moment是处理时间的标杆，可是它过于庞大且默认不支持tree-shaking，并且咱们的项目中只用到了moment(), format(), add(), subtract()等几个很是简单的方法，有点大材小用，因此咱们用 date-fns 来替换它，须要什么方法直接引入就行。

通过上面的三步初步优化，咱们能够看到vendor.js变小了不少，去除了moment，咱们项目以前echart就是按需加载的。

第三步：CDN优化

进过上面的优化，发现 Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 体积，这部分代码是不变的，但会随着每次 vendors 打包改变 hash 从新加载。咱们可使用 CDN 剔除这部分不常常变化的公共库。咱们将vue，vue-router，vuex，axios，jquery，underscore，使用CDN资源引入。国内的CDN服务推荐使用 BootCDN

1.首先咱们在index.html中，添加CDN代码

...
<link href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
  </body>
</html>

2.在vue.config.js中加入webpack配置代码，关于webpack配置中的externals，请参考地址

configureWebpack: {
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'element-ui': 'ELEMENT',
    'axios': 'axios',
    'underscore' : {
      commonjs: 'underscore',
      amd: 'underscore',
      root: '_'
    },
    'jquery': {
      commonjs: 'jQuery',
      amd: 'jQuery',
      root: '$'
    }
  },
}

3. 去除vue.use相关代码

须要注意的是，经过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，所以再也不使用Vue.use(xxx)

也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。

剔除全家桶和Element-ui等只有，剩下的须要首次加载 vendors 就很小了。

使用 CDN 的好处有如下几个方面

（1）加快打包速度。分离公共库之后，每次从新打包就不会再把这些打包进 vendors 文件中。

（2）CDN减轻本身服务器的访问压力，而且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

第四步：检查Nginx 是否开启 gzip

以下图所示，开启了gzip后js的大小比未开启gzip的js小2/3左右，因此若是没开启gzip，感受咱们作的再多意义也不大，如何看本身的项目有没有开启gzip，以下图所示，开启了gzip，在浏览器的控制台Content-Encoding一栏会显示gzip，不然没有。Nginx若是开启gzip，请自行搜索，或者叫服务端来开启。

第五步：检查路由懒加载

路由组件若是不按需加载的话，就会把全部的组件一次性打包到app.js中，致使首次加载内容过多，vue官方文档中也有提到，地址。

{
  name: 'vipBoxActivity',
  path:'vipBoxActivity',
  component(resolve) {
    require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve)
  }
},

{
  path: 'buyerSummary',
  name: 'buyerSummary',
  component: () => import('VIEWS/buyer/buyerSummary/index'),
},

上面的两种引入组件的方法都是正确的，都能实现路由的懒加载。

最后

最后咱们能够发现vendor.js的大小减小了不少。其中第一步到第三步咱们项目中都没作，第四步和第五步咱们作了。若是读者你没作，必定要注意了。最后但愿这篇文字可以对你们有一点点帮组