vue加載優化策略

　　vue.js是一個比較流行的前端框架，與react.js、angular.js相比來講，vue.js入手曲線更加流暢，無論掌握多少均可以快速上手。可是單頁面應用也都有其弊病，有時候首屏加載慢的讓人捏舌。今天咱們以vue cli3.x來講一說如何行之有效的緩解此問題！

方法一 路由懶加載

　　首屏加載慢的緣由無非就是單頁面應用須要加載完整個路由表上的頁面，而路由懶加載就是來解決這個問題的。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。下面這個就是vue路由懶加載的一個具體例子。方法很簡單，若是您不想深刻了解，只需按照這個格式引入路由就能夠了。若是您對路由懶加載感興趣，請移步vue-router路由懶加載

方法二 組件按需加載

　　爲何要按需加載組件呢？緣由也很簡單，一些組件庫包含豐富的組件，若是咱們直接將其引入，難免會引入一些咱們壓根用不到的組件。這樣打包起來體積會比較大，一樣顯得咱們很不專業。所以按需引入就顯得很必要了。咱們如今就拿iview組件庫爲例，瞭解一下按需引入的流程。

1.首先引入按需加載工具 babel-plugin-import

　　babel-plugin-import是babel它會在編譯過程當中將 import 的寫法自動轉換爲按需引入的方式。

npm install babel-plugin-import --save-dev

2.在項目根目錄建立.babelrc文件並配置按需加載內容

{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

3.在main.js配置項目須要加載的組件

　　下面是iview的一個例子

　　這裏須要注意全局註冊的組件須要掛在到vue原型上，例如咱們須要使用Notice組件，那我就須要

Vue.prototype.$Notice = Notice;

　　這樣咱們就能夠正常的使用iview的組件了。

方法三 使用CDN加速策略

　　在Vue項目中，引入到工程中的全部js、css文件，編譯時都會被打包進vendor.js，那麼vendor.js文件體積將會至關的大，影響首開的體驗。解決方法是，將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首開的目的。外部的庫文件，就可使用CDN資源。vue cli3.x在配置cdn是和vue cli2.x有一些區別，vue cli在升級後，代碼結構變化比較大，配置文件集成到了vue.config.js文件中。下面以amap、axios和qs爲例講述如何使用cdn加載資源。

1.在index.html中引入相關cdn資源

2.配置externals

　　vue cli3.x 配置webpack是在vue.config.js的configureWebpack中

　　配置完以後，咱們就能夠正常使用全局的Amap、axios和Qs了

方法四 使用compression-webpack-plugin將文件打包成gzip格式

　　compression-webpack-plugin這個依賴在npm run build是會生成.gz文件。以後項目訪問的文件就是這個.gz文件，正常的項目打包體積會減小一半還要多，是否是很吊

　　下面咱們來進一步講述這個這個依賴的使用流程。

1.npm 引入

npm install compression-webpack-plugin  --save-dev

2.vue cli3.x在 vue.config.js配置webpack

3.nginx開啓gzip模式

　　在上一步前端就已經配置好了，以後就是nginx配合開啓gzip模式，這個比較簡單，只要你對nginx有一點了解，咱們在nginx.conf中的http中配置一些代碼

4.驗證是否配置成功

　　這步就很簡單了只須要查看chunk類文件的Response Headers的Content-Encoding是不是gzip便可

　　以上就是解決vue首屏加載慢的一些方法，但願文章能幫助你們解決問題謝謝。

 

原創博客：轉載請註明vue加載優化策略