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配置。敬請期待！