7中方式來減少webpack bundle體積
該方式對於開發者模式是很有必要的。該模式會自動將剔除 空格、新的行，還有沒有用到的程式碼。並且該模式下會將一些公共庫例如React 的除錯程式碼排除在外。
實現
在進行專案打包的時候，針對webpack使用-p
的標籤同時--mode production
。
webpack -p --mode production 複製程式碼
上面的程式碼的作用
- 使用UglifyJS 對bundle進行體積減少
-
將
NODE_ENV設定為production模式
處理lodash.js
描述
如果在專案中使用了lodash.js，可以採用lodash-webpack-plugin
外掛。該外掛將會移除你未用到的特性。
實現
在webpack.config
配置檔案中的plugin
的選項中，加入
new LodashModuleReplacementPlugin 複製程式碼
note將該外掛在檔案的頭部引入
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
複製程式碼
利用NPM 進行庫的安裝
npm install lodash-webpack-plugin --save-dev 複製程式碼
處理moment.js
描述
如果你在專案中使用了moment.js
，該庫預設將所有時區
的資料存入專案中。所以有些沒有用到的時區資料在打包的時候，就會增加bundle的體積。在使用該庫的時候，需要明確哪幾個時區的資料是需要的。
實現
在webpack.config
配置檔案中的plugin
的選項中，加入
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/nb/), 複製程式碼
nb為你所使用的時區的code。
作用域提升(Scope hoisting)
描述
Scope hoisting使用最快的方式將modules新增到bundle中。 特點：
- 加快js在瀏覽器的執行速度
- 減少bundle的體積
實現
在webpack.config
配置檔案中的plugin
的選項中，加入
new wepback.optimize.ModuleConcatenationPlugin() 複製程式碼
該特性需要webpack3+。
Tree shaking
描述
Tree shaking會將bundle中一些殭屍程式碼(dead code)移除。殭屍程式碼是模組被匯出，但是沒有地方引入。
實現
使用ES6的模組語法
在專案程式碼中儘可能的使用ES6模組並且使用模組名引入。 推薦語法：
import {connect} form 'react-redux';
複製程式碼
錯誤語法：
import reactRedux from "react-redux"; 複製程式碼
配置.babel.rc
向.babel.rc
中新增modules:false
的配置資訊
如果在babel配置檔案中使用了es2015。配置如下
presets:[
["es2015",{"modules":false}]
]
複製程式碼
如果使用了babel-preset-env。
presets:[
["env":{"modules":false}]
]
複製程式碼
note上述的配置針對webpack2+。
使用視覺化工具來分析bundle大小
程式碼分割(Code spliting)
描述
使用webpack你可以將bundle分割成許多更小的模組並且在頁面使用的時候才會去載入本頁面需要 模組。更有甚者，你可以實現模組的非同步 載入。