【前端卡頓的優化思路和方案01】webpack從2.2.1升級到webpack4全紀錄（目前先升級到webpack3.8.1）

背景

• 目前的webpack的版本是 2.2.1，而webpack目前的最新版本已經更新到了4.39.3

直接需求

• 前端頁面比較卡頓

緣由1

• 文件都是採用的require的按需加載的模式，點擊到大文件的時候，加載時間較長。某個頁面要加載的js文件2.4m，須要2-3秒才能加載完

緣由2

• 首頁內容過多，會發出許多http請求，若是此時點擊其餘頁面，會致使請求進入了排隊隊列，要等到首頁的請求完成才能開始。好比點進去首頁直接點擊某個頂部菜單欄頁面，Queueing 的時間長達 6.77 s，以後纔開始發送當前頁面的請求。而總共的加載時間只有7.10 s

解決辦法

緣由1

• 方法1：採用 prefetch 預加載，在首頁空閒時間就開始加載後續其餘頁面的文件。
• 方法2：後端nginx作代碼壓縮，能夠把2.4m的文件壓縮到300k左右。

緣由2

• 針對首頁的請求過多，能夠對諸如滾動新聞欄的信息，作滾動懶加載，避免首頁處理過多的請求。

目前的優化開發計劃

• 解決 緣由1 中的 方法1
• 採用 preload-webpack-plugin 這個插件
• 官方文檔

var PreloadWebpackPlugin = require('preload-webpack-plugin');
// rel 可選 'prefetch' / 'preload'
// include 會匹配有按照這個字段命名的 打包文件
...
new PreloadWebpackPlugin({
      rel: 'prefetch',
      include: 'Flow'
    }),

• 關於預加載的 preload 和 prefetch
• 實際上，webpack4 就可以直接設置預加載及給預加載排序，下一步升級到webpack4後會作此優化。參考文檔

引起的開發需求

• 由於命名 chunk，要使用一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)。因此要進行webpack升級，第一步是先升級到 webpack 3.8.1

• 相關文檔

  • 【前端卡頓的優化思路和方案02】實現webpack的chunk文件的命名
  • 【前端卡頓的優化思路和方案03】升級babel7注意事項