vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

今天打算上线vue的单页面项目，上线后，首页加载速度巨慢！

原因是项目上线后，网速不够快，加载js，css等资源很慢，

打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大，达到了4千多kb，简直不能忍！（vendors的文件是项目中引入的第三方库，打包好的文件）

网上查了查，有很多优化方法，我从简单的开始吧

我选择的第一个优化方式是，给webpack开启gzip压缩，能够将文件体积减少60%。

下面来说一下开启gzip压缩的具体步骤

npm i -D compression-webpack-plugin

在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：

const path = require("path");
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

const webpack = require("webpack");
// vue.config.js
module.exports = {
  //基本路径(相对于服务器根目录   静态资源的相对路径)
  publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制

  productionSourceMap:false,//打包时不要map文件
  //输出文件目录
  outputDir: "dist",

  //是否在保存的时候检查
  lintOnSave: true,

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'statick',

  devServer: {
    // host: 'localhost',
    // host: "0.0.0.0",
    // https: false, // https:{type:Boolean}
    // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/
    // hotOnly: true, // 热更新
    port: 8090
    // proxy:{
    //   '/': {
    //     target: 'http://192.168.0.125:3000/',
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
  },
  configureWebpack: {//引入jquery
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      }),
      new CompressionPlugin({//gzip压缩配置
        test:/.js$|.html$|.css/,//匹配文件名
        threshold:10240,//对超过10kb的数据进行压缩
        deleteOriginalAssets:false,//是否删除原文件
      })
    ]
  },
};

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。over

下面开启第二种优化方式（路由懒加载）

有三种方式，我采用import的方式

router.js中

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "index",
      component: () =>
        import(/* webpackChunkName: "index" */ "./pages/index.vue"),
        children:[
          {
            path:'/',
            name:'com1',
            component:()=>
              import(/* webpackChunkName: "com1" */ './components/com1.vue'),//像这样的 前面的注释内容是有用的，可以指定chunk的名字
          },
          {
            path:'com2',
            name:'com2',
            component:()=>
              import(/* webpackChunkName: "com2" */ './components/com2.vue')
          },
          
        ]
    }
  ]
});

cdn网址https://www.bootcdn.cn/

下面开启CDN加速（vue,vue-router,vueX,axios,jquery，bootstrap,element-ui）

在index.html中的body中引入jquery，和bootstarp，并将main.js中import引入的bootstrap的js和css都注释掉

详细实例加代码（请点这）

我的项目里还用了adminlte的库所以我把这个库也用cdn加速了，把index.html的代码帖出来， main.js中之前import引入的几乎都注释完了，就不帖了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/skins/_all-skins.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/admin-lte/2.4.10/css/AdminLTE.min.css" rel="stylesheet">
    <title>adminlteandvue</title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    <script src="https://cdn.bootcss.com/admin-lte/2.4.10/js/adminlte.min.js"></script>
    <noscript>
      <strong>We're sorry but adminlteandvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>

！！！

示例：

通常我们需要优化加载速度的时候，在众多的优化当中，可以使用link代替import，避免过多的import让加载变慢。那在vue里面应该怎么优化尼。国内的CDN服务推荐使用 BootCDN，国外还是不要用了.......
运用了webpack4的话是默认有分包的功能的，如果之前下载了那些插件，必须要先把它卸载了
首先在index.html里面把所需要的资源先写出来，如：

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css">
</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/axios/0.19.0-beta.1/axios.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.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
  <!-- built files will be auto injected -->
</body>

在vue.config.js里面加上

module.exports = {
 ···
···
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.json', '.vue', '.scss', '.css'],
      alias: {
       ···
      },
    },
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'element-ui': 'ELEMENT',
      'Axios':'axios'
    }
  },

然后修改src/router/index.js

// 注释掉
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(Router)
...

修改 src/store/index.js

...
// 注释掉
// Vue.use(Vuex)
...

最后修改 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import ELEMENT from 'element-ui'
Vue.use(ELEMENT)

import axios from 'Axios'
Vue.prototype.$axios= axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  store: store,
  render: h => h(App)
})

注意，这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMENT

进一步优化首页加载，可以考虑延迟加载，首屏不需要展示的不急加载：

参考webpack官网：https://webpack.js.org/guides/lazy-loading/#root

。