如何使用 webpack 缩减应用大小
优化应用时,首先要做的就是尽可能减小其大小。下面介绍了如何使用 webpack 执行此操作。
使用生产模式(仅限 webpack 4)
Webpack 4 引入了新的 mode
标志。您可以将此标志设置为 'development'
或 'production'
,以提示 Webpack 您正针对特定环境构建应用:
// webpack.config.js
module.exports = {
mode: 'production',
};
在构建正式版应用时,请务必启用 production
模式。这会使 webpack 应用优化,例如缩减大小、移除库中的开发专用代码等。
深入阅读
启用 Minification
缩减是指通过移除多余空格、缩短变量名称等方式压缩代码。示例如下:
// Original code
function map(array, iteratee) {
let index = -1;
const length = array == null ? 0 : array.length;
const result = new Array(length);
while (++index < length) {
result[index] = iteratee(array[index], index, array);
}
return result;
}
↓
// Minified code
function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}
Webpack 支持两种代码缩减方式:软件包级缩减大小和加载器专用选项。二者应同时使用。
软件包级缩减
软件包级缩减功能会在编译后压缩整个软件包。具体流程如下:
您可以如下所示编写代码:
// comments.js import './comments.css'; export function render(data, target) { console.log('Rendered!'); }
Webpack 将其编译为大致如下所示的内容:
// bundle.js (part of) "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony export (immutable) */ __webpack_exports__["render"] = render; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__); function render(data, target) { console.log('Rendered!'); }
缩减器会将其压缩为大致如下形式:
// minified bundle.js (part of) "use strict";function t(e,n){console.log("Rendered!")} Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)
在 webpack 4 中,软件包级缩减功能会自动启用 - 无论是在生产模式下,还是在没有这种模式的情况下。它在后台使用 UglifyJS 缩减器。(如果需要停用缩减大小功能,只需使用开发模式或将 false
传递给 optimization.minimize
选项即可。)
在 webpack 3 中,您需要直接使用 UglifyJS 插件。该插件捆绑了 webpack;如需启用它,请将其添加到配置的 plugins
部分:
// webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin(),
],
};
加载器专用选项
缩减代码大小的第二种方法是特定于加载器的选项(什么是加载器)。借助加载器选项,您可以压缩缩减器无法缩减的内容。例如,当您使用 css-loader
导入 CSS 文件时,该文件会被编译为字符串:
/* comments.css */
.comment {
color: black;
}
// minified bundle.js (part of)
exports=module.exports=__webpack_require__(1)(),
exports.push([module.i,".comment {\r\n color: black;\r\n}",""]);
该缩减器无法压缩此代码,因为它是一个字符串。如需缩减文件内容,我们需要将加载器配置为执行以下操作:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { minimize: true } },
],
},
],
},
};
深入阅读
指定 NODE_ENV=production
减小前端大小的另一种方法是将代码中的 NODE_ENV
环境变量设置为值 production
。
库会读取 NODE_ENV
变量以检测其应在开发模式还是生产环境模式下运行。根据此变量,某些库的行为会有所不同。例如,当 NODE_ENV
未设置为 production
时,Vue.js 会执行额外的检查并输出警告:
// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
warn('props must be strings when using array syntax.');
}
// …
React 的运作方式与之类似 - 它会加载一个包含警告的开发 build:
// react/index.js
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
// react/cjs/react.development.js
// …
warning$3(
componentClass.getDefaultProps.isReactClassApproved,
'getDefaultProps is only used on classic React.createClass ' +
'definitions. Use a static property named `defaultProps` instead.'
);
// …
这种检查和警告在生产环境中通常没有必要,但它们仍会保留在代码中并增加库的大小。在 webpack 4 中,请通过添加 optimization.nodeEnv: 'production'
选项将其移除:
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
nodeEnv: 'production',
minimize: true,
},
};
在 webpack 3 中,请改用 DefinePlugin
:
// webpack.config.js (for webpack 3)
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new webpack.optimize.UglifyJsPlugin()
]
};
optimization.nodeEnv
选项和 DefinePlugin
的工作方式相同,它们会将所有出现的 process.env.NODE_ENV
替换为指定的值。使用上面的配置:
Webpack 会将出现的所有
process.env.NODE_ENV
替换为"production"
:// vue/dist/vue.runtime.esm.js if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } else if (process.env.NODE_ENV !== 'production') { warn('props must be strings when using array syntax.'); }
↓
// vue/dist/vue.runtime.esm.js if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } else if ("production" !== 'production') { warn('props must be strings when using array syntax.'); }
然后,缩减器会移除所有此类
if
分支。因为"production" !== 'production'
始终为 false,插件会知道这些分支中的代码绝不会执行:// vue/dist/vue.runtime.esm.js if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; } else if ("production" !== 'production') { warn('props must be strings when using array syntax.'); }
↓
// vue/dist/vue.runtime.esm.js (without minification) if (typeof val === 'string') { name = camelize(val); res[name] = { type: null }; }
深入阅读
- 什么是“环境变量”
- 关于以下内容的 Webpack 文档:
DefinePlugin
、EnvironmentPlugin
使用 ES 模块
减小前端大小的第二种方法是使用 ES 模块。
当您使用 ES 模块时,webpack 能够执行摇树优化。摇树优化是指捆绑器遍历整个依赖项树,检查使用的依赖项,并移除未使用的依赖项。因此,如果您使用 ES 模块语法,webpack 可消除未使用的代码:
您编写了一个包含多个导出内容的文件,但应用仅使用了其中一个导出内容:
// comments.js export const render = () => { return 'Rendered!'; }; export const commentRestEndpoint = '/rest/comments'; // index.js import { render } from './comments.js'; render();
Webpack 了解
commentRestEndpoint
未被使用,因此不会在软件包中生成单独的导出点:// bundle.js (part that corresponds to comments.js) (function(module, __webpack_exports__, __webpack_require__) { "use strict"; const render = () => { return 'Rendered!'; }; /* harmony export (immutable) */ __webpack_exports__["a"] = render; const commentRestEndpoint = '/rest/comments'; /* unused harmony export commentRestEndpoint */ })
缩减器会移除未使用的变量:
// bundle.js (part that corresponds to comments.js) (function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})
即使库是使用 ES 模块编写的,也是如此。
不过,您无需精确使用 webpack 的内置缩减器 (UglifyJsPlugin
)。任何支持移除死代码的缩减器(例如 Babel Minify 插件或 Google Closure Compiler 插件)都可以执行这项操作。
深入阅读
关于摇树优化的 Webpack 文档
优化图像
图片占了页面大小的一半以上。虽然它们不像 JavaScript 那么重要(例如,它们不会阻止渲染),但仍然占用很大一部分带宽。请使用 url-loader
、svg-url-loader
和 image-webpack-loader
在 webpack 中对其进行优化。
url-loader
将小型静态文件内嵌到应用中。如果不进行配置,它会接受一个传递的文件,将其放在已编译的 bundle 旁边,并返回该文件的网址。但是,如果我们指定 limit
选项,它会将小于此限制的文件编码为 Base64 数据网址,并返回此网址。这样会将图片内嵌到 JavaScript 代码中并保存 HTTP 请求:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/,
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB (10240 bytes)
limit: 10 * 1024,
},
},
],
}
};
// index.js
import imageUrl from './image.png';
// → If image.png is smaller than 10 kB, `imageUrl` will include
// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
// → If image.png is larger than 10 kB, the loader will create a new file,
// and `imageUrl` will include its url: `/2fcd56a1920be.png`
svg-url-loader
的工作原理与 url-loader
类似,只不过它使用网址编码(而不是 Base64 编码)对文件进行编码。这对于 SVG 图片非常有用,因为 SVG 文件只是纯文本,因此这种编码方式对图片大小更有效。
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
loader: "svg-url-loader",
options: {
limit: 10 * 1024,
noquotes: true
}
}
]
}
};
image-webpack-loader
会压缩通过它的图片。它支持 JPG、PNG、GIF 和 SVG 图片,因此我们将将其用于所有这些类型。
此加载器不会将图片嵌入到应用中,因此必须与 url-loader
和 svg-url-loader
搭配使用。为避免将其复制并粘贴到这两条规则中(一条用于 JPG/PNG/GIF 图片,另一条用于 SVG 图片),我们将使用 enforce: 'pre'
将此加载器添加为单独的规则:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'image-webpack-loader',
// This will apply the loader before the other ones
enforce: 'pre'
}
]
}
};
加载器的默认设置已经可以使用,但如果您想进一步配置,请参阅插件选项。如需选择要指定的选项,请参阅 Addy Osmani 编写的精彩图像优化指南。
深入阅读
- “base64 编码的用途是什么?”
- Addy Osmani 编写的图片优化指南
优化依赖项
平均有超过一半的 JavaScript 大小来自依赖项,而其中一部分大小可能是不必要的。
例如,Lodash(自 v4.17.4 开始)向软件包中添加了 72 KB 的缩减代码。但是,如果您只使用 20 种方法,那么大约 65 KB 的缩减代码不会起到任何作用。
另一个例子是 Moment.js。其 2.19.1 版本需要 223 KB 的缩减代码大小,非常庞大 - 2017 年 10 月,网页上的 JavaScript 的平均大小为 452 KB。不过,其中 170 KB 是本地化文件。如果您不将 Moment.js 与多种语言搭配使用,这些文件会在无意义的情况下使软件包变得臃肿。
所有这些依赖项都可以轻松优化。我们在 GitHub 代码库中收集了各种优化方法 - 去看看吧!
为 ES 模块启用模块串联(也称为作用域提升)
在构建 bundle 时,webpack 会将每个模块封装到一个函数中:
// index.js
import {render} from './comments.js';
render();
// comments.js
export function render(data, target) {
console.log('Rendered!');
}
↓
// bundle.js (part of)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_exports__["a"] = render;
function render(data, target) {
console.log('Rendered!');
}
})
过去,若要将 CommonJS/AMD 模块彼此隔离,就需要这样做。不过,这也增加了每个模块的大小和性能开销。
Webpack 2 引入了对 ES 模块的支持,与 CommonJS 和 AMD 模块不同,这些模块可以捆绑,而无需用函数封装每个模块。而 webpack 3 则通过模块串联实现了这种捆绑。模块串联的作用如下:
// index.js
import {render} from './comments.js';
render();
// comments.js
export function render(data, target) {
console.log('Rendered!');
}
↓
// Unlike the previous snippet, this bundle has only one module
// which includes the code from both files
// bundle.js (part of; compiled with ModuleConcatenationPlugin)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// CONCATENATED MODULE: ./comments.js
function render(data, target) {
console.log('Rendered!');
}
// CONCATENATED MODULE: ./index.js
render();
})
看到区别了吗?在普通软件包中,模块 0 需要模块 1 中的 render
。通过模块串联,require
只需替换为所需函数,即可移除模块 1。bundle 包含的模块更少,并且模块开销也更少!
如需启用此行为,在 webpack 4 中,请启用 optimization.concatenateModules
选项:
// webpack.config.js (for webpack 4)
module.exports = {
optimization: {
concatenateModules: true
}
};
在 webpack 3 中,使用 ModuleConcatenationPlugin
:
// webpack.config.js (for webpack 3)
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
深入阅读
- ModuleConcatenationPlugin 的 Webpack 文档
- “范围提升简介”
- 对此插件的用途的详细说明
如果您同时拥有 webpack 代码和非 webpack 代码,请使用 externals
您可能有一个大型项目,其中某些代码是使用 webpack 编译的,而有些代码不是。与视频托管网站类似,其中播放器 widget 可以使用 webpack 构建,而周围的页面可能不是:
![视频托管网站的屏幕截图](https://web.developers.google.cn/static/articles/decrease-frontend-size/image/a-screenshot-a-video-hos-5b11b4fdff7f2.png?authuser=9&hl=ca)
如果这两段代码具有共同的依赖项,您可以共享它们,以避免多次下载其代码。这是通过 Webpack 的 externals
选项实现的 - 它会将模块替换为变量或其他外部导入项。
如果 window
中提供了依赖项
如果您的非 webpack 代码依赖于以 window
中的变量形式提供的依赖项,请将依赖项名称用作变量名称:
// webpack.config.js
module.exports = {
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
};
使用此配置时,webpack 不会捆绑 react
和 react-dom
软件包。而是会替换为如下内容:
// bundle.js (part of)
(function(module, exports) {
// A module that exports `window.React`. Without `externals`,
// this module would include the whole React bundle
module.exports = React;
}),
(function(module, exports) {
// A module that exports `window.ReactDOM`. Without `externals`,
// this module would include the whole ReactDOM bundle
module.exports = ReactDOM;
})
如果依赖项作为 AMD 软件包加载
如果您的非 webpack 代码不会向 window
公开依赖项,情况就会更复杂。但是,如果非 webpack 代码将这些依赖项用作 AMD 软件包,仍可以避免加载同一代码两次。
为此,请将 webpack 代码编译为 AMD 软件包,并将别名模块编译为库网址:
// webpack.config.js
module.exports = {
output: {
libraryTarget: 'amd'
},
externals: {
'react': {
amd: '/libraries/react.min.js'
},
'react-dom': {
amd: '/libraries/react-dom.min.js'
}
}
};
Webpack 会将 bundle 封装到 define()
中,并使其依赖于以下网址:
// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });
如果非 webpack 代码使用相同的网址加载其依赖项,则这些文件将仅加载一次,其他请求将使用加载器缓存。
深入阅读
externals
上的 Webpack 文档
汇总
- 如果使用 webpack 4,请启用生产模式
- 使用软件包级缩减器和加载器选项最大限度减少代码
- 将
NODE_ENV
替换为production
,移除用于开发用途的代码 - 使用 ES 模块启用摇树优化功能
- 压缩图片
- 应用特定于依赖项的优化
- 启用模块串联
- 如适合您的情况,请使用
externals