webpack 與 vue

在使用vue開發時，遇到打包後單個文件太大，因而需要分包，不然加載時間太久。雖然盡可能減少請求次數，但是單個包太大也不是好事

思路

• 組件按需加載
• vue-router 的懶加載
• 第三方包分離
• 代碼分割時，

組件按需加載

• 現在ui庫大多都是以組件的形式進行處理，因而不用將整個庫都導入，只需導入想要的即可
• 根據對應庫的文檔進行操作即可，現在每個庫都有對應的使用流程，及相關配置，並不是很難
• 只是在導入css樣式時依舊需要全部導入（目前只能如此）

vue-router 懶加載

• 利用 promise 異步功能，進行相關配置後，頁面點擊時，會根據相應的進行頁面加載，而不是一次性加載完，畢竟有些頁面也許根本就不會進入
• 語法： componet: () => import(‘**/*‘) 如果是大量的，最後提取進行封裝成函數，這樣調用就好了

第三方包分離

• 經常會引入第三方庫，但是這些感覺沒有必要也混入到一個文件中
• CommonsChunkPlugin通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供後續使用

entry: {
  // 分離第三方包  
  vendor: ["jquery", "other-lib"],
  app: "./entry"
},

代碼分割

• 使用 promise 作為分割點
• 需要使用相應的插件LimitChunkCountPlugin ==== 會註意到有一些很小的 chunk - 這產生了大量 HTTP 請求開銷。幸運的是，此插件可以通過合並的方式，後處理你的 chunk，以減少請求數。

開啟Gzip進行壓縮

• 這個需要服務器配合才可以

首屏加載慢

• 組件按需加載
• require.ensuse

vue-router
// prev
const component1 = () => import(‘@/components/**‘)

//now 利用webpack   require.ensure
comst component2 = r => require.ensure([], () => r(require(‘@/components/+‘**‘+.vue‘)))

test

經過測試 使用路由懶加載的 import 反而比 require.ensuse更好

原始，沒有啟用的結果

使用 import方式

• 源碼
  

• 打包的結果
  

  使用 require.ensuse方式

• 源碼
  

• 打包後的結果
  

總結

• 以後就直接使用 import 進行懶加載了
• 若是多頁面，（現在開發的都是SPA），可以在入口進行處理，

路漫漫其修遠兮，吾將繼續前行，苦修

vue打包體積優化之旅