webpack構建速度和體積極限優化

1、爲何須要構建工具？

1.轉換ES6語法

2.轉換JSX

3.CSS前綴補全/預處理器

4.壓縮混淆

5.圖片壓縮

2、webpack執行過程

3、webpack執行原理

4、速度優化策略

1.使用webpack4

1）V8帶來的優化（for of 替代forEach、Map和Set替代Object、includes替代indexOf）

2)默認使用更快的md4 hash算法

3）webpacks AST能夠直接從loader傳遞給AST，減小解析時間

4）使用字符串方法替代正則表達式

2.多進程/多實例構建

1）資源並行解析可選方案

2）使用HappyPack解析資源

原理：每次webpack解析一個模塊，HappyPack會將它及它的依賴分配給worker線程中

3）並行壓縮

方法一：使用parallel-uglify-plugin插件

方法二：uglifyjs-webpack-plugin開啓parallel參數

3.分包

預編譯資源模塊

思路：將react、react-dom、redux、react-redux基礎包和業務基礎包打包成一個文件

方法：使用DLLPlugin進行分包，DllReferencePlugin對manifest.json引用

4.緩存

目的：提高二次構建速度

方法：使用HardSourceWebpackPlugin或者cache-loader

5.縮小構建目標

目的：儘量的少構建模塊

好比babel-loader不解析node_modules

5、體積優化策略

1.Scope Hoisting

現象：構建後的代碼存在大量重複的閉包代碼

原理：將全部模塊的代碼按照引用放在一個函數做用域裏，而後適當的重命名一些變量以防止變量名衝突

對比：經過scope hoisting能夠減小函數申明代碼

使用代碼示例 要求：必須是ES6的語法，CJS的方式不支持

2.Tree-shaking

概念：1個模塊可能有多個方法，只要其中的某個方法使用到了，則整個文件都會被打到bundle裏面去，Tree-shaking就是隻把用到的方法打入bundle，沒用到的方法會在uglify階段被擦除掉。

使用：webpack默認支持，在.babelrc裏設置modules:false便可

要求：必須是ES6的語法，CJS的方法不支持

3.公共資源分離

目的：提取多頁面公共JS chunk代碼

使用：

webpack3使用CommonsChunkPlugin

webpack4使用SplitChunksPlugin

4.圖片壓縮

要求：基於Node庫的imagemin或者tinypng API

使用：配置image-webpack-loader

5.動態Polyfill 

如何使用動態Polyfill service?