Vue-Cli項目優化操做

起源

由Vue-Cli（2.X）生成的Vue項目中存在着首屏加載過慢，編譯資源過大等問題，主要針對這些問題對項目進行相應的優化，提高項目響應速度，優化項目性能。

操做

路由懶加載

在Vue-router官方文檔中有針對懶加載的介紹,主要是將整個大的js進行切片，對當前路由的資源進行一個按需加載。在Vue-cli生成的路由組件引用方法是這樣的

import HelloWorld from '@/components/HelloWorld'
複製代碼

只需將組件的引用方式改成

const HelloWorld = () =>
    import ('@/components/HelloWorld')
複製代碼

而後從新編譯便可

開啓預加載/優先加載

使用webpack插件 PreloadWebpackPlugin進行預加載prefetch和優先加載preload。 主要作的是用preload加載vendor、manifest與app三個js而用prefetch去加載全部路由對應的文件。 首先要 安裝插件

npm install --save preload-webpack-plugin
複製代碼

在webpack.prod.conf.js中修改，加入預加載的代碼 (注意放在 new HtmlWebpackPlugin() 的下面)

new PreloadWebpackPlugin({
  rel: 'prefetch',
}),
new PreloadWebpackPlugin({
  rel: 'preload',
  as(entry) {
    if (/\.css$/.test(entry)) return 'style'
    return 'script';
  },
  include: ['app', 'vendor', 'manifest']
})
複製代碼

開啓GZip

gzip,使用gzip壓縮資源能夠更快地加載資源。客戶端http請求頭聲明瀏覽器支持的壓縮方式，服務端配置啓用壓縮，壓縮的文件類型，壓縮方式。當客戶端請求到服務端的時候，服務器解析請求頭，若是客戶端支持gzip壓縮，響應時對請求的資源進行壓縮並返回給客戶端，瀏覽器按照本身的方式解析，在http響應頭，咱們能夠看到content-encoding:gzip，這是指服務端使用了gzip的壓縮方式。

啓用gzip,在nginx的site-conf中開啓gzip

server {
    gzip on;
    gzip_types       text/xml text/css text/plain text/javascript application/javascript application/x-javascript;
}

複製代碼

webpack處理，須要先安裝插件

npm install --save-dev compression-webpack-plugin
複製代碼

而後在config的index.js中 ，將productionGzip改成true，開啓Gzip壓縮。

PS：若是編譯報錯,則安裝compression-webpack-plugin@1.1.12版本

對第三方工具庫進行額外處理

本項目中Vender中主要是Vue,Vue-router,axios等固定依賴的代碼,工具庫的代碼通常不會改動，因此能夠將這些工具庫的代碼抽出來,單獨走CDN加載以減小編譯JS文件的大小。 具體操做 : 選擇相應的工具庫版本的cdn,加入到index.html中

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
複製代碼

以後去到webpack中修改相應的打包配置

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios'
}
複製代碼

ps:假若main.js中有關於公共庫的引用 請記得清除掉 這時再去編譯 打包 就會發現編譯的Vender.js小了不少