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