[打包优化]Webpack体积压缩

[打包优化]Webpack体积压缩

技术杂谈小彩虹2021-08-17 10:30:15200A+A-

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

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

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们