vue优化之加快首屏加载速度

一、依赖优化之 CDN 加速
vue基础依赖通过第三方cdn连接引入

module.exports = {
  //CDN
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex'
  },
}

main.js 更改vue引入方式
router.js 更改 vue-router引入方式

const Vue = require('vue');

const Router = require('vue-router')

注意：要删除vue-router的依赖，包括依赖包和package.json中的vue-router。不然会报错（Uncaught TypeError: Cannot redefine property: $router）
在build–webpack.base.config文件 export模块配置如下
减少app.js和vender.js的体积，加快加载速度

二、gzip暴力压缩
CDN部署静态资源：静态请求打在nginx时，将获取静态资源的地址进行重定向CDN内容分发网络
1.npm安装
npm i compression-webpack-plugin@1.1.12 --save-dev
2.配置，config里的index.js文件

 build: {
    // Gzip off by default as many popular static hosts such as
   	// Surge or Netlify already gzip all static assets for you.
   	// Before setting to `true`, make sure to:
   	// npm install --save-dev compression-webpack-plugin
   	productionGzip: true,      //设置为true，之前时false  改为true
   	productionGzipExtensions: ['js', 'css'],
 }

后端nginx配置：
两种配置都加上，在有gz文件的时候进行静态压缩，不存在gz文件的时候进行在线压缩而不是加载源文件
gzip_static的优先级高，会先加载静态gz文件，当同目录下不存在此文件的时候，会执行在线压缩的命令。

gzip on;
gzip_static on;
gzip_comp_level 2;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;  

响应头的Content-Edcoding:gzip表示gzip压缩已经生效，而Etag中只有简单字符表示静态资源加载，而前面带 W/ 表示启动了在线压缩。看下图：

三、路由懒加载，路由的按需加载

webpack< 2.4 时
{
  path:'/',
  name:'home',
  components:resolve=>require(['@/components/home'],resolve)
}

webpack> 2.4 时
{
  path:'/',
  name:'home',
  components:()=>import('@/components/home')
}

四、UI框架（element-ui，iview，vant等等）按需引入，在.babelrc文件里配置
官方文档都有对应说明，这里只举例vant

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ]

五、页面优化：移动端首屏加载可以使用骨架屏，自定义loading，首页单独做服务端渲染。