[打包优化]Webpack体积压缩

前端LeBron

发布于 2021-12-08 16:38:05

1.7K00

代码可运行

文章被收录于专栏：前端LeBron前端LeBron

运行总次数：0

代码可运行

原创不易，未经作者允许禁止转载！！
前段时间和天诚学长（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"],
                    },
                },
            ],
        })
    ]
}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-06-02，如有侵权请联系 cloudcommunity@tencent.com 删除

网站