0
0

webpack的性能优化（二）——减少打包体积

    优化webpack性能时，主要集中在两个方面：**

优化构建后的结果

和

优化构建时的速度

**。前一篇文章已经介绍了如何通过

webpack的分包

来优化构建后的结果。而在本篇文章中，我们将从**

减少打包体积

**的角度来探讨。

1.通过CDN链接引入第三方库

    CDN是指通过相互连接的网络系统，利用最靠近每个用户的服务器，以**更快**、**更可靠**的方式将音乐、图片、视频、应用程序以及其他文件发送给用户，从而实现高性能、可扩展性和低成本的网络内容传递。

平时在开发中我们使用CDN主要有两种方式：

  • 将打包的所有静态资源，放到CDN服务器。让用户所有资源都是通过CDN服务器加载。
  • 通过利用知名第三方库的CDN，我们可以避免将这些库打包到我们的项目中，从而降低打包体积。

本文的重点是减少打包体积，因此我们将重点讨论第二种方式。

  • 步骤一：首先通过在webpack.config.js中的配置排除对这些库的打包
  // webpack.config.js
const { resolve } = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'build'),
  },
  // 排除打包dayjs
  externals: {
    lodash: '_',
  },
};

强调：在externals这个对象中

  1. lodash 作为属性名（key）： 这表示当你在代码中导入 lodash 时，实际上不会将 lodash 包含在你的输出文件中，而是期望它在运行时从外部引入。
  2. '_' 作为属性值（value）： 假定在运行环境中已经有一个全局的 _ 对象或者模块

外部扩展(Externals) | webpack 中文文档 (docschina.org)

  • 步骤二：在html模块中，加入第三方库的CDN服务器地址

推荐一个国内比较好用的CDN是 bootcdn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入第三方库的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script></script>
</head>
<body></body>
</html>

2. 代码压缩

2.1 JavaScript的压缩

    压缩JavaScripte文件可以使用**Terser**压缩工具，**Terser**可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小。webpack v5 开箱即带有最新版本的 **

terser-webpack-plugin

**。

    在Webpack中，有一个名为**

minimizer

属性，它在生产模式下默认开启，使用

TerserPlugin

来处理代码。这意味着Webpack会自动使用

TerserPlugin

**来压缩和优化JavaScript代码，以减小文件大小并提高性能。

    如果你不满意默认配置，你可以自己创建**

TerserPlugin

的实例，并覆盖相关配置。这允许你根据项目的需求自定义代码压缩和优化，使Webpack配置变得灵活而适应各种场景。总之，

minimizer

**属性允许你控制生产模式下的代码压缩，提供了定制化的选项以满足你的需求。

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      extractComments: true, //默认值为true，表示会将注释抽取到一个单独的文件中；
      parallel: true, //使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认os.cpus().length - 1；
      //在这里设置tenser相关的配置
      terserOptions: {
        // 设置压缩相关的代码
        compress:{
          ecma: 5,  // 设置输出所需的EcmaScript标准版本
          unused: false // 是否删除未引用的函数和变量
          arrows: true, //class或者object中的函数，转换成箭头函数
          dead_code: true //移除不可达的代码（tree shaking）
        },
        toplevel: true, // 是否转换顶级作用域中声明的名称。
        keep_classnames: true, // 保留类名,
        keep_fnames: true // 保留函数的名称
      }
    })],
  },

这里面的配置非常多，具体可以看terser文档

2.2 css的压缩

压缩CSS通常是去除无用的空格等，，因为很难去修改选择器、属性的名称、值等。压缩CSS可以使用webpack的一个插件：**

css-minimizer-webpack-plugin

**

  • 第一步，安装**css-minimizer-webpack-plugin**：
npm install css-minimizer-webpack-plugin -D
  • 第二步，在optimization.minimizer中配置
optimization: {
    minimizer: [
        new cssMinimizerPlugin({
           parallel: true
       })
    ],
  },

2.3 HTTP的压缩

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

HTTP压缩的流程:

  • 第一步：HTTP数据在服务器发送前就已经被压缩了；（可以在webpack中完成）
  • 第二步：兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式；

  • 第三步：服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器；

第一步对HTTP进行压缩怎么实现 ？

2.3.1 Webpack对文件压缩

可以使用CompressionPlugin。

  • 第一步，安装CompressionPlugin：
npm install compression-webpack-plugin -D

第二步，使用CompressionPlugin即可

plugins: [
    // 生产环境
    new CompressionPlugin({
      test: /\.(css|js)$/i, // 匹配哪些文件需要压缩
      threshold: 0, // 设置文件从多大开始压缩
      minRatio: 0.8, // 至少的压缩比例
      algorithm: "gzip", // 采用的压缩算法
      // exclude
      // include
    }),
  ]

2.3.2 HTML文件中代码的压缩

我们之前使用了 **HtmlWebpackPlugin **插件来生成HTML的模板，事实上它还有一些其他的配置：

  • inject：设置打包的资源插入的位置 true、 false 、body、head
  • cache：设置为true，只有当文件改变时，才会生成新的文件（默认值也是true）
  • minify：默认会使用一个插件html-minifier-terser
plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html",
        // inject: "body"
        cache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存
        minify: isProduction ? {
          removeComments: false, // 是否要移除注释
          removeRedundantAttributes: false, // 是否移除多余的属性
          removeEmptyAttributes: true, // 是否移除一些空属性
          collapseWhitespace: false,
          removeStyleLinkTypeAttributes: true,
          minifyCSS: true,
          minifyJS: {
            mangle: {
              toplevel: true
            }
          }
        }: false
      }),
    ],

5. Tree Shaking

** Tree Shaking 是一个术语，在计算机中表示消除死代码（dead_code），最早的想法起源于LISP，用于消除未调用的代码**（纯函数无副作用，可以放心的消除，这也是为什么要求我们在进

行函数式编程时，尽量使用纯函数的原因之一），后来Tree Shaking也被应用于其他的语言，比如JavaScript、Dart；

5.1 JavaScript的Tree Shaking

  • 对JavaScript进行Tree Shaking是源自打包工具rollup；
  • 这是因为Tree Shaking依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）；
  • webpack2正式内置支持了ES2015模块，和检测未使用模块的能力；
  • 在webpack4正式扩展了这个能力，并且通过 package.json的 sideEffects属性作为标记，告知webpack在编译时， 哪里文件可以安全的删除掉；
  • webpack5中，也提供了对部分CommonJS的Tree Shaking的支持； https://github.com/webpack/changelog-v5#commonjs-tree-shaking

5.2 webpack实现Tree Shaking

事实上webpack实现Tree Shaking采用了两种不同的方案：

  • usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的；
  • sideEffects：直接查看该文件是否有副作用，如果没有副作用，并且没有被使用则直接删除该模块；

5.2.1 usedExports

将mode设置为development模式：

  • 为了可以看到 usedExports带来的效果，我们需要设置为 development 模式
  • 因为在 production 模式下，webpack默认的一些优化会带来很大额影响。

设置usedExports为true和false对比打包后的代码：

  • 在usedExports设置为true时，会有一段注释：unused harmony export mul；
  • 这段注释的意义是什么呢？告知Terser在优化时，可以删除掉这段代码；

这个时候，我们将 minimize设置true（利用Terser对JavaScript进行压缩）：

  • usedExports设置为false时，mul函数没有被移除掉；
  • usedExports设置为true时，mul函数被移除掉；

所以，usedExports实现Tree Shaking是结合Terser来完成的。

5.2.2 sideEffects

sideEffects用于告知webpack compiler哪些模块是没有有副作用的：

  • 副作用的意思是这里面的代码有执行一些特殊的任务（比如这个模块中修改了全局变量），不能仅仅通过export来判断这段代码的意义；

在package.json中设置sideEffects的值：

  • 将sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports；
  • 如果有一些模块是有副作用，一些模块是没有副作用的，可以设置为数组；

package.json

"sideEffects": false, // 全部的模块都没有副作用
"sideEffects": ["./src/format.js", "*.css" ], //这两个文件没有副作用在没有被使用时可以放心的删除

比如我们有一个format.js、style.css文件：

  • 在sideEffects中指定这两个文件无副作用；
  • 该文件在导入时没有使用任何的变量来接受，这两个文件的内容没有被其他模块使用；
  • 那么打包后的文件，不会保留format.js、style.css相关的任何代码；

还可以通过module.rules来配置：

module: {
      rules: [
        {
          test: /\.css/i,
          use: [
            isProduction ? MiniCssExtractPlugin.loader: "style-loader", 
            "css-loader"],
          sideEffects: true
        },
      ],
    },

参考:

webpack性能优化（二）：减少打包体积 - 掘金 (juejin.cn)

标签： webpack 前端
本文转载自: https://blog.csdn.net/ICanWin_lll/article/details/135492531
版权归原作者 ICanWin_lll 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webpack的性能优化（二）——减少打包体积”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

hadoop技术实验- 第4章 HBase 开发：使用Java操作HBase

智能对话微信前端小程序设计与开发

前端配置开发环境：新电脑配置前端开发环境，Vue开发环境配置的详细过程

SpringBoot集成MQTT服务器和客户端并通过WebSocket将消息实时发送到前端（本地搭建MQTT服务器）

idea | 搭建 SpringBoot 项目之配置 Maven

Python毕业设计选题：基于django+vue的全国民宿信息管理系统

文章导航