1. 程式人生 > >vue cli 平穩升級webapck4

vue cli 平穩升級webapck4

webpack4 released 已經有一段時間了,外掛系統趨於平穩,適逢對webpack3的打包速度很不滿意,因此決定將當前在做的專案進行升級,正好也實踐一下webpack4。

新特性

0配置

應該是parcel出來以後,webpack團隊意識到其配置確實有點複雜,不太容易上手。so, webapck4 開始支援0配置啟動。不過,萬變不離其宗,webpack4的0配置也只是支援了預設entry 和 output而已,即預設entry為./src,預設output為/dist。

模式選擇mode

mode有兩個可選項,production & development。作為必選項,mode是不可預設的。在production模式下,會預設做一些必要的優化,如程式碼壓縮和作用域提升,還會預設指定process.env.NODE_ENV 為 production。在development模式下,優化了增量構建,支援註釋和提示,並且支援 eval 下的 source maps,同時預設指定process.env.NODE_ENV 為 development。

sideEffects

通過該配置可以大幅度減小打包體積。當模組的 package.json 配置sideEffects:false表明該模組沒有副作用,也就意味著 webpack 可以安全地清除被用於重複匯出(re-exports)的程式碼。

模組型別

webpack4提供了5種模組型別。


json: 可通過 require 和 import 匯入的 JSON 格式的資料(預設為 .json 的檔案)

webassembly: WebAssembly 模組,(目前是 .wasm 檔案的預設型別)

javascript/auto: (webpack 3中的預設型別)支援所有的JS模組系統:CommonJS、AMD。

javascript/esm: EcmaScript模組(預設 .mjs 檔案)。

javascript/dynamic: 僅支援 CommonJS & AMD。

JSON

webpack 4 不僅支援本地處理 JSON,還支援對 JSON 的 Tree Shaking。當使用 ESM 語法 import json 時,webpack 會消除掉JSON Module 中未使用的匯出。此外,如果要用 loader 轉換 json 為 js,需要設定 type 為 javascript/auto。

optimization

Webpack 4 刪除了 CommonsChunkPlugin,並預設啟用了它的許多功能。因此webpack4可以實現很好的預設優化。但是,對於那些需要自定義的快取策略,增加了 optimization.splitChunks 和 optimization.runtimeChunk。具體解釋可參考這篇文章,解釋得很詳細。

RIP CommonsChunkPlugin

手把手升級

我是把原來vue cli的專案做了一下升級,總體來說,升級還算是比較順利步驟,這裡我們分成兩步走,首先升級相關依賴的外掛,然後優化webapck配置檔案。

升級外掛


首先要把下面列表的外掛升級到對應版本或者最新版本

  1. [email protected]
  2. [email protected],
  3. [email protected],
  4. [email protected],
  5. [email protected],
  6. [email protected],
  7. [email protected],
  8. [email protected],
  9. [email protected],
  10. [email protected],
  11. [email protected],
  12. [email protected],
  13. [email protected],
  14. [email protected]

如果遇到其他包報錯,應該是升級到最新的就可以解決了。

更新配置檔案

webpack.dev.conf.js

dev環境變化不大,畢竟webpack4很大一部分的優化都是針對生產環境的,該檔案我們只需要刪除一些不再需要的外掛既可以。例如:webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin,其功能webpack4已經預設配置。同時,要設定


mode: 'development'

webpack.production.conf.js

webvpack4中改動最大,影響也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用來抽取程式碼中的共用部分,webpack runtime之類的程式碼,結合chunkhash,實現最好的快取策略。而optimization.splitChunks則實現了相同的功能,並且配置更加靈活,具體解釋可參考這篇文章,解釋得很詳細。RIP CommonsChunkPlugin


mode: 'production',
optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        chunks: 'initial',
        name: 'vendors',
      },
      'async-vendors': {
        test: /[\\/]node_modules[\\/]/,
        minChunks: 2,
        chunks: 'async',
        name: 'async-vendors'
      }
    }
  },
  runtimeChunk: { name: 'runtime' }
}

總結

總體來說本次升級還算順利,不到一天搞定,目前感覺,打包速度大約優化了70%左右,同時打包後的程式碼體積也有了很大的優化,帶來的效果很顯著的。
如果覺得我沒有說明白,這裡有一份配置,請拿走

原文地址:https://segmentfault.com/a/1190000014169887