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的最小化处理之后，它得到简化。

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

Webpack 4教程：为什么要优化代码相关推荐

Webpack 4教程 - 第四部分，使用SplitChunksPlugin分离代码
2019独角兽企业重金招聘Python工程师标准>>> 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wana ...
ceres实现的pnp解算后的位姿优化代码详解
论文阅读模块将分享点云处理,SLAM,三维视觉,高精地图相关的文章.公众号致力于理解三维视觉领域相关内容的干货分享,欢迎各位加入我,我们一起每天一篇文章阅读,开启分享之旅,有兴趣的可联系微信diany ...
四种高性能数据类型，Python collections助你优化代码、简洁任务
在这篇文章中,机器学习工程师 George Seif 介绍了 Python collections 模块最受欢迎的四种数据类型以及它们各自的使用方法.这些数据类型可以对代码进行优化,进而实现更简洁的任 ...
webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
代码补全快餐教程(1) - 30行代码见证奇迹
代码补全快餐教程(1) - 30行代码见证奇迹下面是我用30多行代码,包含了很多空行和注释的代码写成的代码补全模型.我们先看看效果吧. 补全效果案例先来看个比较普通的(Python, Keras) ...
读书笔记：《SEO教程：搜索引擎优化入门与进阶》（4）——代码优化
--对HTML源代码进行必要的调整. 1.去掉冗余代码 --降低页面体积 --提高搜索引擎友好性做法: 去掉每行代码前面.后面的空格字符: 去掉空白行: 2. HTML标签转换 --使用短标签替换同 ...
读书笔记：《SEO教程：搜索引擎优化入门与进阶》（2）——关键字
关键字的位置和形式搜索引擎分析网页时,在HTML源代码中是自上而下进行的,因此搜索引擎会更加重视网页源代码中首先出现的内容,因此在规划页面时,应非常重视页面的<head>节点: < ...
《SEO教程：搜索引擎优化入门与进阶(第3版)》
<SEO教程:搜索引擎优化入门与进阶(第3版)> 基本信息作者: 吴泽欣丛书名: 图灵原创出版社:人民邮电出版社 ISBN:9787115357014 上架时间:2014-7-1 出 ...
webpack基础教程
webpack基础教程一 webpack五大核心二 webpack处理css资源三 webpack处理less.scss.sass.styl资源四 webpack-module的详细配置五 ...

Webpack 4教程：为什么要优化代码

Webpack 4教程：为什么要优化代码相关推荐

最新文章

热门文章