vue-cli下的首屏加载性能优化

一、路由懒加载

当我们构建应用时，js包会变得特别大，非常影响加载速度。如果我们能把不同路由对应的组件进行分隔，但路由被访问时在再加载对应的组件，这样会高效很多，具体实现方式：

传统静态引用方式：

import HelloWorld from '@/pages/HelloWorld'

routes: [{path: '/', name: 'HelloWorld', component: HelloWorld}]

ES6模块化拆分形式：

 routes: [{path: '/parent', name: 'parent', component: () => import('@/pages/parent')}]

Tips: 由于在vue-cli3.0中默认开启了prefetch（预加载模式），所以我们需要关闭这个功能。
官网示例：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

当 prefetch 插件被禁用时，你可以通过 webpack 的内联注释手动选定要提前获取的代码区块：

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

二、组件按需引入

首屏需要加载依赖包，想element-ui这样特别大的组件，以按需引入的方式替代全局引用。
全局引入方式：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

按需引入：

1. 按需引入

	//引入表单
  import Vue from 'vue'
  import { Form, FormItem, Input} from 'element-ui'

  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Input)

2. 在 .babelrc文件中添加（ vue-cli 3要先安装 babel-plugin-component)：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

三、启用gzip压缩

安装compression-webpack-plugin

npm i compression-webpack-plugin --save

修改配置：

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
configureWebpack:config=>{
        if(progress.env.NODE_ENV === 'production'){
            return{
                plugins: [
                    new CompressionPlugin({
                        test:/\.js$|\.html$|.\css/, //匹配文件名
                        threshold: 10240,//对超过10k的数据压缩
                        deleteOriginalAssets: false //不删除源文件
                    })
                ]
            }
        }

    },
}

为了使其工作，我们还需要对你的 Web 服务器配置进行修改（例如 Apache | Nginx ）。

 gzip on; #开启或关闭gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 

四、第三方库比较大的情况下使用cdn引入

在webpack配置中添加externals，忽略不必要打包的库：

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

在index.html中使用cdn引入:

<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>

五、当一次性需要载入过多图片时使用图片懒加载

六、参考

• Vue CLI官网链接
• 提升90%加载速度——vuecli下的首屏性能优化
• 前端性能优化（一）——提升加载速度