Webpack 4教程：為什麼要優化程式碼
轉載請註明出處：葡萄城官網 ，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/07/30/webpack-4-course-part-five-built-in-optimization-for-production/
在本次Wepack 4教程，我們會聚焦通過壓縮輸出內容，來提升你應用的使用者體驗。這意味著，生產環境需要一套不同的做法。今天，我們將通過mode 引數來講述Webpack內建的優化功能。開始吧！
首先，讓我們來回答究竟為什麼要優化程式碼。如果你遵循良好的程式碼實踐，你可能會致力於將程式碼寫得容易閱讀，所以你會新增很多空白符（tab、空格和空行）和註釋。它讓程式碼更好讀，但也讓檔案變大了。另一方面，為了使用者體驗而犧牲可閱讀性，這是不可取的。要在生產環境手動刪除無用程式碼是非常繁瑣的事情。因此，對這個問題已有了現成的解決方案，你可以在專案中拿來就用。
生產環境模式
mode是Webpack 4引入的一個引數。自此，就需要在配置中設定它。如果不配置它，會得到一個警告，並應用上預設值production。如果使用了mode: "produnction"，Webpack會為你設定一些相關配置。因此，你的打包輸出會更好地用於生產環境。我們會一步步學習它具體為我們做了什麼事。
UglifyJsPlugin
把mode 設定為produnction會為我們的配置新增UglifyJsPlugin 外掛。它通過壓縮程式碼讓其更小和更快。從簡單的任務，比如縮減你的變數名或者刪除多餘的空白，到刪除冗餘程式碼，它都能做到。預設情況下，它會解析每一個 .js 檔案。我們會在本文介紹UglifyJsPlugin 最基本的配置。雖然Webpack 4根據選擇的mode 為你做了優化，但你仍然可以通過optimization 屬性配置它。
// webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: "production",
// 使用 mode: "production" 後會新增下面的配置：
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin()
]
},
};
你能傳給UglifyJsPlugin 的最重要的屬性叫做uglifyOptions。它有許多預設的配置。其中一個最值得注意的部分是compress 屬性。
// webpack.config.js
new UglifyJsPlugin({
uglifyOptions: {
compress: {
/*(...)*/
}
}
});
它負責配置UglifyJsPlugin 所做的許多重量級工作，以讓你的程式碼更精簡。你可以在 官方列表 檢視完整的可用配置。它也有一些預設值。
另一個UglifyJsPlugin配置的重要屬性是output
new UglifyJsPlugin({
uglifyOptions: {
compress: {
/*(...)*/
},
output: {
/*(...)*/
}
}
})
預設情況下，輸出的程式碼會盡可能的簡短。你可以配置output 來改變這種行為。你可能不會想要修改大部分的預設配置，但是有一個值得考慮的屬性是drop_console ，它預設設定為false。把它改為true將會去除所有的console.log呼叫。若想了解更多關於output 的配置，請檢視 完整列表 。
UglifyJsPlugin有很多可選配置。你可以在 Github上的文件 裡看到所有這些。
DefinePlugin
這個外掛允許你在編譯時 建立全域性常量。如果你使用mode: "produnction"，Webpack會預設設定上： "process.env.NODE_ENV": JSON.stringify("produnction")。
// webpack.config.js
module.exports = {
mode: "production",
// 使用 mode: "production" 會新增以下內容：
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
}),
]
}
注意，由於是純文字的替換，傳給此屬性的值必須用引號括起來。它可以通過JSON.stringify("produnction")或者'"produnction"'實現。
在編譯時 解析它，意味著如果你在程式碼中使用了process.env.NODE_ENV，它將會被替換為"produnction"。
console.log(process.env.NODE_ENV);
if(process.env.NODE_ENV === 'production') {
console.log('this is production!');
}
請記住，process.env.NODE_ENV的值在編譯之後不會被保留。使用Webpack處理上面的程式碼，會得到：
console.log("production");
if(true) {
console.log("this is production!");
}
在經過UglifyJsPlugin的最小化處理之後，它得到簡化。
console.log("production");
console.log("this is production!");
NoEmitOnErrorsPlugin
這個外掛會幫你處理編譯時的錯誤。例如，你可能會嘗試匯入Webpack不能解析的某個檔案。在這種情況下，Webpack會為應用建立一個包含錯誤資訊的版本。使用NoEmitOnErrorsPlugin 外掛後，這個錯誤資訊版本根本就不會被建立。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
mode: "produnction",
// 使用mode: produnction，會新增如下的配置
plugins: [
new webpack.NoEmitOnErrorsPlugin()
]
}
ModuleConcatenationPlugin
預設情況下，Webpack建立單獨的閉包來包含每個模組。這個包裹函式會輕微地減緩你程式碼的執行速度。請看這個例子：
// one.js
const dog = 'Fluffy';
export const one = 1;
// two.js
const dog = 'Fluffy';
export const two = 2;
// index.js
import { one } from './one';
import { two } from './two';
const dog = 'Fluffy';
console.log(one, two);
如果沒有ModuleConcatenationPlugin，輸出的包看起來像這樣：
// main.js
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _one__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _two__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
const dog = 'Fluffy';
console.log(_one__WEBPACK_IMPORTED_MODULE_0__["one"], _two__WEBPACK_IMPORTED_MODULE_1__["two"]);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "one", function() { return one; });
const dog = 'Fluffy';
const one = 1;
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "two", function() { return two; });
const dog = 'Fluffy';
const two = 2;
/***/ })
/******/ ]);
當你把mode 設為production ，此外掛就開始工作了。這樣一來，輸出的包現在都在一個scope裡了。更少的函式意味著更少的執行時開銷。
注意，我在這個例子中沒有使用任何優化配置。由於優化器其實已經知道模組之間的內部依賴，它能更好地完成任務。
// main.js
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// 串起來的模組: ./src/one.js
const dog = 'Fluffy';
const one = 1;
// 串起來的模組: ./src/two.js
const two_dog = 'Fluffy';
const two = 2;
// 串起來的模組: ./src/index.js
const src_dog = 'Fluffy';
console.log(one, two);
/***/ })
/******/ ]);
如果你覺得感興趣，可檢視 webpack部落格上的這篇文章 ，它對此給出了更多資訊。
總結
今天我們學習了Webpack能通過設定mode: "produnction"做的內建優化。這能使你的應用載入更快，效能更好。它通過配置一系列打包流程，以滿足你生產環境的要求。本教程的下一部分，我們將介紹mode 的development 配置。敬請期待！