前端构建编译代码时,压缩代码也是很重要的,压缩后的代码体积减小,传输速度快,从而提升网页加速速度和减少网络传输流量。除此之外,还具有 混淆源码 的作用,由于压缩后的代码可读性非常差,就算别人下载到了网页的代码,也大大增加了代码分析和改造的难度。
压缩 JS
目前最成熟的 JavaScript 代码压缩工具是 UglifyJS
, 它会分析 JavaScript 代码语法树,理解代码含义,从而能做到诸如去掉无效代码、去掉日志输出代码、缩短变量名等优化。
在 webpack v4 中,uglifyjs-webpack-plugin
是被默认集成在生产模式中的。所以,默认打包出的 JS 文件就是压缩好的,如果你需要更多的自定义也可以对 uglifyjs-webpack-plugin
进行配置。
首先,安装uglifyjs-webpack-plugin
:
npm install uglifyjs-webpack-plugin --save-dev
然后,添加到你的 webpack 配置中:
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
uglifyjs-webpack-plugin
的可配置项:
-
test
:测试匹配的文件,默认值:/\.js(\?.*)?$/i
module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ test: /\.js(\?.*)?$/i, }), ], }, };
-
include
:要被处理的文件。 -
exclude
:不被处理的文件。 -
chunkFilter
:判断哪些 chunk 可以被压缩(默认所有的 chunk 都会被压缩)。 返回值为true
则会被压缩,false
则不会被压缩。module.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ chunkFilter: (chunk) => { // `vendor` 块不压缩 if (chunk.name === "vendor") { return false; } return true; }, }), ], }, };
-
cache
:启动文件缓存,默认为false
,默认的缓存目录路径:node_modules/.cache/uglifyjs-webpack-plugin
。 -
parallel
:使用多进程并行运行以提高构建速度,默认为false
,推荐开启。 -
sourceMap
:使用源映射将错误信息位置映射到模块(这将会减慢编译速度),默认为false
。 -
uglifyOptions
:UglifyJS 压缩配置选项。
压缩 CSS
CSS 代码也可以像 JS 那样被压缩,目前比较成熟可靠的 CSS 压缩工具是 cssnano
,cssnano
是能理解 CSS 代码的含义,而不仅仅是删掉空格,例如:
对于 webpack v5 或更高版本,官方推荐使用 CssMinimizerWebpackPlugin
,该插件是使用 cssnano
优化和压缩 CSS,支持缓存和并发模式下运行。
首先,我们需要安装 css-minimizer-webpack-plugin
:
npm install css-minimizer-webpack-plugin --save-dev
接着在 webpack 配置中加入该插件:
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
// ...
optimization: {
minimizer: [
// 在 webpack@5 中,你可以使用 `...` 语法来扩展现有的 minimizer(即 `terser-webpack-plugin`),将下一行取消注释
`...`,
new CssMinimizerPlugin(),
],
},
};
压缩 HTML
HtmlWebpackPlugin
插件除了可以帮助我们简化 HTML 文件的创建,也可以压缩 HTML 文件。
首先,需要先安装 HtmlWebpackPlugin
插件:
npm install --save-dev html-webpack-plugin
添加到 webpack 配置文件中:
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [new HtmlWebpackPlugin()],
};
如果不添加任何配置的话,会生成一个默认 index.html 文件,并自动注入所有的 chunk 和压缩。
也可以通过自定义配置参数,以下几个是常见的参数:
template
:模板的路径,默认会去寻找src/index.ejs
是否存在。filename
:输出文件的名称,默认为index.html
。inject
:是否将资源注入到模版中,默认为true
。minify
:压缩参数。在生产模式下(production
),默认为true
;否则,默认为false
。
如果 minify
为 true
,生成的 HTML 将使用 html-minifier-terser 和以下选项进行压缩:
{
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}