原创不易，未经作者允许禁止转载！！
前段时间和天诚学长（21届上岸TX的大佬）交流了一下他在Webpack CSS压缩遇到的坑，一时兴起总结了这篇Webpack体积压缩相关的知识，希望你读完能有所收获！
HTTP压缩
- HTTP压缩是一种内置在 服务器 和 客户端 之间的，以改进传输速度和带宽利用率的方式;
- HTTP压缩的流程什么呢?
- 第一步:HTTP数据在服务器发送前就已经被压缩了;(可以在webpack中完成)
- 第二步:兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式;
- 第三步:服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器;
压缩格式
- compress – UNIX的“compress”程序的方法(历史性原因，不推荐大多数应用使用，应该使用gzip或 deflate);
- deflate – 基于deflate算法(定义于RFC 1951)的压缩，使用zlib数据格式封装;
- gzip – GNU zip格式(定义于RFC 1952)，是目前使用比较广泛的压缩算法;
- br – 一种新的开源压缩算法，专为HTTP内容的编码而设计;
Webpack对文件压缩
使用CompressionPlugin对文件进行压缩
- 安装
npm install compression-webpack-plugin
- webpack.prod.js
- threshold：x以上的文件才进行压缩
- minRatio：最小压缩比，小于则不压缩
- test：正则匹配的文件才压缩
- alogorithm：压缩算法
const CompressionPlugin = require("compression-webpack-plugin")
plugins:[
new CompressionPlugin({
threshold: 0,
minRatio:0.6,
test:/.(css|js)/i,
algorithm:"gzip"
})
]
HTML文件中代码的压缩
- 之前使用了HtmlWebpackPlugin插件来生成HTML的模板，事实上它还有一些其他的配置:
- inject:设置打包的资源插入的位置
- true、 false 、body、head
- cache:设置为true，只有当文件改变时，才会生成新的文件(默认值也是true)
- minify:默认会使用一个插件html-minifier-terser
- webpack.prod.js
plugins: [
new HtmlWebpackPlugin({
title: "LeBronChao Webpack",
template: "./src/index.html",
inject:"body",
cache:true,
minify: isProduction ? {
removeComments: true, // 是否删除注释
removeRedundantAttributes:true, // 是否删除多余（默认）属性
removeEmptyAttributes:true, // 是否删除空属性
collapseWhitespace:false, // 折叠空格
removeStyleLinkTypeAttributes:true, // 比如link中的type="text/css"
minifyCSS:true, // 是否压缩style标签内的css
minifyJS:{ // 压缩JS选项，可参考Terser配置
mangle:{
toplevel: true
}
}
}: false
}),
]
InlineChunkHtmlPlugin
- 另外有一个插件，可以辅助将一些chunk出来的模块，内联到html中:
- 比如runtime的代码，代码量不大，但是是必须加载的;
- 那么可以直接内联到html中;
- 这个插件是在react-dev-utils中实现的，所以我们可以安装一下:
npm i react-dev-utils
- 在production的plugins中进行配置（内联runtime文件）:
- webpack.prod.js
- 参数一为HtmlWebpackPlugin
- 参数二为正则匹配表达式
const InlieChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin")
plugins:[
new InlieChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime. .js/])
]
Terser
- 什么是Terser呢?
- Terser是一个JavaScript的解释(Parser)、Mangler(绞肉机)/Compressor(压缩机)的工具集;
- 早期会使用 uglify-js来压缩、丑化JavaScript代码，但是目前已经不再维护，并且不支持ES6 的 语法;
- Terser是从 uglify-es fork 过来的，并且保留它原来的大部分API以及适配 uglify-es和uglify-js@3等; 也就是说，Terser可以帮助压缩、丑化代码，让我们的bundle变得更小。
- 因为Terser是一个独立的工具，所以它可以单独安装:
npm i terser -g
- 可以在命令行中使用Terser
- https://github.com/terser/terser#compress-options
- https://github.com/terser/terser#mangle-options
- 因为他们的配置非常多Compress option和Mangle option
- 详情查看文档
Webpack中配置Terser
- 首先，需要打开minimize，让其对代码进行压缩(默认production模式下已经打开了)
- 其次，可以在minimizer创建一个TerserPlugin:
- compress:设置压缩相关的选项;
- mangle:设置丑化相关的选项，可以直接设置为true;
- toplevel:底层变量是否进行转换;
- keep_classnames:保留类的名称;
- 也可以设置自己的个数，但是使用默认值即可;
- 在开发中，不希望保留这个注释时，可以设置为false;
- extractComments:默认值为true，表示会将注释抽取到一个单独的文件中;
- parallel:使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认数量: os.cpus().length - 1;
- terserOptions:设置terser相关的配置
CSS压缩
- 另一个代码的压缩是CSS:
- CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等;
- CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin;
- css-minimizer-webpack-plugin是使用cssnano工具来优化、压缩CSS(也可以单独使用);
- 安装 css-minimizer-webpack-plugin:
npm i css-minimizer-webpack-plugin
- 在optimization.minimizer中配置
配置示例
- webpack.prod.js
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const isProduction = true
const TerserPlugin = require("terser-webpack-plugin")
const CssMiniMizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
mode: "production",
optimization: {
chunkIds: "deterministic",
minimize:true,
minimizer:[
new TerserPlugin({
extractComments:true,
parallel:true,
terserOptions:{
compress:true,
mangle:true,
toplevel:false,
keep_classnames:false
}
}),
new CssMiniMizerPlugin({
parallel:true
})
]
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: "public",
// 可不写，默认到output
to: "",
globOptions: {
ignore: ["**/index.html", "**/.DS_Store", "**/abc.txt"],
},
},
],
})
]
}
