写作不易,未经作者允许禁止以任何形式转载!
如果觉得文章不错,欢迎关注、点赞和分享!

[打包优化]Webpack体积压缩 (juejin.cn)

HTTP压缩

  • HTTP压缩是一种内置在 服务器 和 客户端 之间的,以改进传输速度和带宽利用率的方式;

  • HTTP压缩的流程什么呢?

    • 第一步:HTTP数据在服务器发送前就已经被压缩了;(可以在webpack中完成)
    • 第二步:兼容的浏览器在向服务器发送请求时,会告知服务器自己支持哪些压缩格式;
    • 第三步:服务器在浏览器支持的压缩格式下,直接返回对应的压缩后的文件,并且在响应头中告知浏览器;

压缩格式

  1. compress – UNIX的“compress”程序的方法(历史性原因,不推荐大多数应用使用,应该使用gzip或

    deflate);

  2. deflate – 基于deflate算法(定义于RFC 1951)的压缩,使用zlib数据格式封装;

  3. gzip – GNU zip格式(定义于RFC 1952),是目前使用比较广泛的压缩算法;

  4. 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

Webpack中配置Terser

  • 首先,需要打开minimize,让其对代码进行压缩(默认production模式下已经打开了)

  • 其次,可以在minimizer创建一个TerserPlugin:

    • extractComments:默认值为true,表示会将注释抽取到一个单独的文件中;
      • 在开发中,不希望保留这个注释时,可以设置为false;
    • parallel:使用多进程并发运行提高构建的速度,默认值是true,并发运行的默认数量: os.cpus().length - 1;
      • 也可以设置自己的个数,但是使用默认值即可;
    • terserOptions:设置terser相关的配置
      • compress:设置压缩相关的选项;
      • mangle:设置丑化相关的选项,可以直接设置为true;
      • toplevel:底层变量是否进行转换;
      • keep_classnames:保留类的名称;

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"],
},
},
],
})
]
}

[打包优化]Webpack体积压缩 (juejin.cn)

掘金:前端LeBron

知乎:前端LeBron

持续分享技术博文,关注微信公众号👇🏻

img