转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处: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"做的内置优化。这能使你的应用加载更快,性能更好。它通过配置一系列打包流程,以满足你生产环境的要求。本教程的下一部分,我们将介绍modedevelopment配置。敬请期待!

  

Webpack 4教程:为什么要优化代码的更多相关文章

  1. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

  2. Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/06/04/code-splitting-with-s ...

  3. Webpack 4教程 - 第七部分 减少打包体积与Tree Shaking

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://wanago.io/2018/08/13/webpack-4-course-part ...

  4. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

  5. webpack 使用教程--实时刷新测试

    学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...

  6. WebPack实例与前端性能优化

    [前端构建]WebPack实例与前端性能优化   计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给 ...

  7. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  8. webpack使用教程

    webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是 ...

  9. 《SEO教程:搜索引擎优化入门与进阶(第3版)》

    <SEO教程:搜索引擎优化入门与进阶(第3版)> 基本信息 作者: 吴泽欣 丛书名: 图灵原创 出版社:人民邮电出版社 ISBN:9787115357014 上架时间:2014-7-1 出 ...

随机推荐

  1. Python3|ddt|unittest|浅议数据驱动测试

    目录 1.DDT简介 2.data装饰器 3.unpack装饰器 4.file_data装饰器 5.总结 1.DDT简介 Data-Driven Tests(DDT)即数据驱动测试.它允许您通过不同的 ...

  2. 视频当道的时代,这些珍藏的优质 Python 播客值得推荐

    我国互联网的发展道路与欧美不同,在内容的形式上,我们似乎实现了跨越式的发展——早早进入了移动互联网时代,直播和短视频等形式的内容成为了潮流,而文字形式的博客(blog)与声音形式的播客(podcast ...

  3. CopyOnWriteArrayList你都不知道,怎么拿offer?

    前言 只有光头才能变强 前一阵子写过一篇COW(Copy On Write)文章,结果阅读量很低啊...COW奶牛!Copy On Write机制了解一下 可能大家对这个技术比较陌生吧,但这项技术是挺 ...

  4. jQuery --- 第四期 (jQuery动效)

    学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  5. ArcGIS API for JavaScript 4.x 本地部署之Nginx法

    上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...

  6. 一起学Android之Sqlite

    概述 Android对Sqlite提供了完全友好的支持,在应用程序内部,都可以通过名称访问任何的数据库.建议通过SQLiteOpenHelpe的子类并通过重写onCreate() 方法进行创建数据表. ...

  7. Sql Server 本地(客户端)连接服务器端操作

    网有很多相关内容,我在此做记录和总结 1.主要是sql server 配置管理工具的配置 在此参考 https://www.cnblogs.com/yougmi/p/4616273.html(再次感谢 ...

  8. 你可能需要为你的 APP 适配 iOS 11

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/AZFrqL9dnlgA6Vt2sVhxIw 作者:s ...

  9. Asp.net Core的Swagger接口根据模块、版本分组

    近期一直在学习Asp.net Core,微软的文档太难看,都是英文翻译过来的,很不友好,感谢这个博客,从壹开始前后端分离[ .NET Core2.0 +Vue2.0 ],让我入门了,刚学到这个Swag ...

  10. 一行一行手敲webpack4配置

    代码:github 一.webpack4--基本配置 这一部分通过webpack的基本配置,使用loader对图片和样式进行打包,从而了解webpack4简单的用方法,保证自己能够配置正确,提升学习动 ...