使用Webpack4並啟用production模式
描述
該方式對於開發者模式是很有必要的。該模式會自動將剔除空格、新的行，還有沒有用到的程式碼。並且該模式下會將一些公共庫例如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分割成許多更小的模組並且在頁面使用的時候才會去載入本頁面需要模組。更有甚者，你可以實現模組的非同步載入。
實現
如下是程式碼分割的額外介紹
blog.jakoblind.no/how-code-sp…
node:該檔案是翻譯自國外開發者的部落格(感覺很有用，並且在開發中能夠用到)
部落格地址：blog.jakoblind.no/