iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

Webpack with ASP.NET MVC系列 第 24

Webpack 優化總結

  • 分享至 

  • xImage
  •  

這邊總結一下優化 Webpack 打包體積以及打包速度時,使用了哪些方法。

打包優化大原則

縮小打包體積

盡量減少打包重複的 CODE,透過 optimization.splitChunks 提取 Commons 共用檔

減少請求數

透過 Webpack Bundle 以及 CSS Sprite 等技術減少請求數

使用緩存策略

透過 contenthash 結合 Html-Webpack-Plugin 達到緩存效果

規劃開發階段打包策略

Webpack 打包過程拆分為許多任務,我們可以選擇全部執行,或是局部執行 ( 後面會在補充說明 )

推薦優化方式

遵照上述優化的大原則,這邊介紹一些優化打包速度/體積的一些方式

Webpack-Dll-Plugin

前面文章有介紹,用來抽離第三方套件獨立打包,優化打包速度效果十分顯著。

HappyPack

前面文章有介紹,允許 Webpack 採用多進程方式打包,網路上查到對於優化 Webpack watch 時的 Rebuild 有幫助。不過我實際導入時,覺得效果並不顯著 @@

Webpack 設定檔優化

每個 loader 都要設置 include exclude,限縮 Webpack 查詢檔案的範圍。設定檔的 cache 也都要開啟,尤其是 Babel 的 cacheDirectory 一定要開啟。

如何規劃開發階段打包任務

先來看看 Webpack 打包時處理了那些任務

我們可以講任務拆分為:

JS Babel 轉譯、第三方套件打包
CSS SASS Compile、PostCSS、透過 Mini-css-extract-plugin 提取 CSS 檔
HTML 透過 Html-Webpack-Plugin 產生 Partial View
CSS Sprite 生成雪碧圖

每次的 npm start 之後 Webpack 處理了這堆任務,少則幾十秒,多則幾分鐘。平常開發是還好,若是需求一多,時間緊迫的時候,這幾分鐘會讓你急得像熱鍋上的螞蟻。因此,我們將打包指令區分如下:

npm start 執行全部任務打包
npm dev:js 只打包 JS 檔,且不處理 Babel 轉譯
npm build 執行全部任務打包,包含 Minify Uglify

透過細分不同的打包指令,盡可能優化打包速度。


上一篇
優化 Webpack 打包檔案大小
下一篇
動手實作 Webpack-Plugin
系列文
Webpack with ASP.NET MVC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言