Vue項目首頁加載慢問題優化

1. vue-router懶加載

當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

 {
      path: "/index",
      component: resolve => require(["./views/home/Index.vue"], resolve)
    },

2. 去除map文件

npm run build編譯之後，我們查看編譯生成的文件，發現有很多.map文件，這些文件也佔了不小的空間。.map文件的作用是幫助編譯後的代碼調試，但是我們上線的代碼已經調試完成，所以上線時可以不生成.map文件。

在vue.config.js添加配置

//去除打包的map文件
productionSourceMap: false,

3. Gzip壓縮

gizp壓縮是一種http請求優化方式，通過減少文件體積來提高加載速度。html、js、css文件甚至json數據都可以用它壓縮，可以減小60%以上的體積。

3.1 前端生成gz文件

webpack在打包時可以藉助 compression webpack plugin 實現gzip壓縮，首先需要安裝該插件：

npm i -D compression-webpack-plugin

在vue.config.js添加配置

// 導入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 定義壓縮文件類型
const productionGzipExtensions = ["js", "css"];

configureWebpack: {
    //開啓gzip壓縮,減少爲文件體積，提高加載速度
    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //對10K以上的數據進行壓縮
        minRatio: 0.8,
        deleteOriginalAssets: false //是否刪除源文件
      })
    ],
  },

普通js文件與gz文件對比：

3.2 後端開啓Gzip

這裏後端服務器使用的是Tomcat。修改Tomcat的server.xml文件。在該Connector 上設置compression=”on”開啓壓縮支持（關閉爲off，默認關閉）。

 <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
			   compression="on" />

查看服務器是否開啓Gzip壓縮，可以直接查看響應文件的文件頭Content-Encoding 部分。

使用Tomcat作爲服務器的話會發現開啓gzip後有些文件響應頭Content-Encoding是gzip，有些不是。
這個因爲tomcat對於大於48Kb的文件爲了節省cpu就不壓縮。添加useSendfile="false"後，就可以被正常壓縮了。