vue项目首次加载缓慢优化

1. 组件全局引入改为按需引入
   element-ui按需引入：

• 安装babel-plugin-component
  npm install babel-plugin-component -D 用cnpm会更快
• 将 .babelrc 修改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["component",[
      {
        "libraryName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]]
  ],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node", "istanbul"]
    }
  }
}

根据自己已有的改

• 在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 路由懒加载

没有懒加载的格式， 先导入后直接用导入名

import Vue from 'vue'
import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 Vue.use(Router)
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component:HelloWorld
     }
   ]
 })

懒加载格式， 不需要导入，直接在component:resolve中写路径

export default new Router({
  mode: 'history', // 去掉路由地址的#
  routes: [
    {
      path: '/login',
      name: 'login',
      meta:{title:'login'},
      // component: login
      component:resolve => require(['../page/login'], resolve)
    }
 ]
})

3. Nginx 是否开启 gzip
   在nginx的配置文件中加入如下配置， 加在http里面

gzip on;
#不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
#buffer，就是，嗯，算了不解释了，不用改
gzip_buffers 4 16k;
#用了反向代理的话，末端通信是HTTP/1.0,默认是HTTP/1.1
#gzip_http_version 1.0;
#压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
gzip_comp_level 2;
#进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
#跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"
gzip_vary off;
#IE6对Gzip不怎么友好，不给它Gzip了
gzip_disable "MSIE [1-6]\.";