vue首屏加载优化

[chenyinkai]

vue首屏加载优化

项目基于 vue-cli 搭建, 部署采用 nginx 服务.

使用CDN

首先将 vue, vue-router 从 vendor.js 中分离出来(若使用 vuex, 则将 vuex 也分离)

1.在 index.html 中引入

<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

2.修改 build/webpack.base.conf.js, 配置 externals

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
  }

3.修改 src/router/index.js, 注释以下两行

// import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

// Vue.use(Router)

组件懒加载

将加载全部组件改成按需加载加载

修改 src/router/index.js, 将组件由 import 引入换成 require.ensure 引入

import index from '@/components/index'
// 修改组件引入方式
const index = r => require.ensure([], () => r(require('@/components/index')))

nginx 开启 gzip

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
# 要压缩的类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;

更多关于 nginx gzip, 可前往官方文档了解