0、寫在前面
Webpack優(yōu)化可以分為優(yōu)化開發(fā)體驗(yàn)和優(yōu)化輸出質(zhì)量兩部分
1偎快、優(yōu)化開發(fā)體驗(yàn)
優(yōu)化開發(fā)體驗(yàn)的目的是為了提升開發(fā)時(shí)的效率冯乘，其中又可以分為以下幾點(diǎn)：
-
優(yōu)化構(gòu)建速度。在項(xiàng)目龐大時(shí)構(gòu)建耗時(shí)可能會(huì)變的很長晒夹，每次等待構(gòu)建的耗時(shí)加起來也會(huì)是個(gè)大數(shù)目裆馒。
-
-
4-1-1 在配置
Loader時(shí)通過include去縮小命中范圍
-
4-1-2 優(yōu)化
resolve.modules配置，指明存放第三方模塊的絕對(duì)路徑丐怯，以減少尋找喷好，配置如下：
4-1-3 優(yōu)化
resolve.mainFields配置4-1-4 優(yōu)化
resolve.alias配置-
4-1-5 優(yōu)化
resolve.extensions配置
在配置resolve.extensions時(shí)你需要遵守以下幾點(diǎn)，以做到盡可能的優(yōu)化構(gòu)建性能：- 后綴嘗試列表要盡可能的小响逢，不要把項(xiàng)目中不可能存在的情況寫到后綴嘗試列表中绒窑。
- 頻率出現(xiàn)最高的文件后綴要優(yōu)先放在最前面，以做到盡快的退出尋找過程舔亭。
- 在源碼中寫導(dǎo)入語句時(shí)些膨，要盡可能的帶上后綴，從而可以避免尋找過程钦铺。例如在你確定的情況下把
require('./data')寫成require('./data.json')订雾。
4-1-6 優(yōu)化
module.noParse配置
-
4-2 使用 DllPlugin
為什么給 Web 項(xiàng)目構(gòu)建接入 動(dòng)態(tài)鏈接庫 的思想后，會(huì)大大提升構(gòu)建速度呢矛洞？ 原因在于包含大量復(fù)用模塊的動(dòng)態(tài)鏈接庫只需要編譯一次洼哎，在之后的構(gòu)建過程中被動(dòng)態(tài)鏈接庫包含的模塊將不會(huì)在重新編譯烫映，而是直接使用動(dòng)態(tài)鏈接庫中的代碼。 由于動(dòng)態(tài)鏈接庫中大多數(shù)包含的是常用的第三方模塊噩峦，例如react锭沟、react-dom，只要不升級(jí)這些模塊的版本识补，動(dòng)態(tài)鏈接庫就不用重新編譯族淮。4-3 使用 HappyPack
在整個(gè)Webpack構(gòu)建流程中，最耗時(shí)的流程可能就是Loader對(duì)文件的轉(zhuǎn)換操作了凭涂，因?yàn)橐D(zhuǎn)換的文件數(shù)據(jù)巨多祝辣，而且這些轉(zhuǎn)換操作都只能一個(gè)個(gè)挨著處理。（運(yùn)行在 Node.js 之上的 Webpack 是單線程模型的）
HappyPack的核心原理就是把這部分任務(wù)分解到多個(gè)進(jìn)程去并行處理切油，從而減少了總的構(gòu)建時(shí)間蝙斜。4-4 使用 ParallelUglifyPlugin
ParallelUglifyPlugin 會(huì)開啟多個(gè)子進(jìn)程，把對(duì)多個(gè)文件的壓縮工作分配給多個(gè)子進(jìn)程去完成澎胡，每個(gè)子進(jìn)程其實(shí)還是通過UglifyJS去壓縮代碼孕荠，但是變成了并行執(zhí)行。 所以ParallelUglifyPlugin能更快的完成對(duì)多個(gè)文件的壓縮工作滤馍。
-
-
優(yōu)化使用體驗(yàn)岛琼。通過自動(dòng)化手段完成一些重復(fù)的工作，讓我們專注于解決問題本身巢株。
-
4-5 使用自動(dòng)刷新
使用webpack模塊負(fù)責(zé)監(jiān)聽文件槐瑞，webpack-dev-server模塊則負(fù)責(zé)刷新瀏覽器。 - 4-6 開啟模塊熱替換
-
4-5 使用自動(dòng)刷新
2阁苞、優(yōu)化輸出質(zhì)量
優(yōu)化輸出質(zhì)量的目的是為了給用戶呈現(xiàn)體驗(yàn)更好的網(wǎng)頁困檩，例如減少首屏加載時(shí)間、提升性能流暢度等那槽。 這至關(guān)重要悼沿，因?yàn)樵诨ヂ?lián)網(wǎng)行業(yè)競(jìng)爭(zhēng)日益激烈的今天，這可能關(guān)系到你的產(chǎn)品的生死骚灸。
優(yōu)化輸出質(zhì)量本質(zhì)是優(yōu)化構(gòu)建輸出的要發(fā)布到線上的代碼糟趾，分為以下幾點(diǎn)：
-
減少用戶能感知到的加載時(shí)間，也就是首屏加載時(shí)間甚牲。
- 4-7 區(qū)分環(huán)境
- 4-8 壓縮代碼
- 4-9 CDN 加速
-
4-10 使用 Tree Shaking
Tree Shaking可以用來剔除JavaScript中用不上的死代碼（沒用到的代碼）义郑。它依賴靜態(tài)的 ES6 模塊化語法，例如通過 import 和 export 導(dǎo)入導(dǎo)出丈钙。 - 4-11 提取公共代碼
- 4-12 按需加載
-
提升流暢度非驮，也就是提升代碼性能。
參考文章：
深入淺出 Webpack - 優(yōu)化
