likes
comments
collection
share

webpack5学习 --- 代码压缩

作者站长头像
站长
· 阅读数 12

Terser

Terser是一个JavaScript的解释(Parser)、Mangler(绞肉机 丑化)/Compressor(压缩机 移除不使用的代码，压缩多行代码为一行)的工具集

Terser可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小

Terser是一个独立的工具，可以单独安装

早期我们会使用 uglify-js来压缩、丑化我们的JavaScript代码，但是目前已经不再维护，并且不支持ES6+的 语法;

Terser是从 uglify-es fork 过来的，并且保留它原来的大部分API以及适配 uglify-es和uglify-js@3等

# 安装
npm i terser

# 使用
npx terser ./src/index.js -o index.min.js
# 等价于
npx terser ./src/index.js -o index.min.js -c defaults

# 多个选项之间使用逗号进行分割
# 如果只有选项名，没有配置值的使用使用的是默认值
npx terser ./src/index.js -o index.min.js -c arrows,arguments=true

# 使用默认形式进行压缩，默认情况下只对函数的参数进行压缩
npx terser ./src/index.js -o index.min.js -m

# 全部的代码统统进行压缩
npx terser ./src/index.js -o index.min.js -m toplevel=true

但是，在实际开发中，我们从零去使用Terser对我们的代码进行相应的配置，是十分的繁琐的，为此webpack使用了内置的插件TerserWebpackPlugin，这个插件内部对terser进行了一系列通用的默认配置。

TerserWebpackPlugin可以让我们不需要手动的通过terser来处理我们的代码，而是直接通过webpack来处理

因为webpack内部默认就会使用TerserWebpackPlugin，所以我们直接引入即可，因为TerserWebpackPlugin已经作为了webpack的依赖被安装下来了

配置

在webpack中有一个minimizer属性，在production模式下，默认就是使用TerserPlugin来处理我们的代码的

如果我们对默认的配置不满意，也可以自己来创建TerserPlugin的实例，并且覆盖相关的配置

  1. 首先，我们需要打开minimize，让其对我们的代码进行压缩(默认production模式下已经打开了，如果是在development模式下进行使用的时候，需要手动进行开启)

  2. 其次，我们可以在minimizer创建一个TerserPlugin选项，并在其中进行相应的配置

optimization: {
  minimizer: [
    new TerserPlugin({
      // 不将 comments进行抽离
      extractComments: false,

      // 是否使用多线程进行编译 --- 默认值就是true
      // 可以设置为number，即手动指定设置多少进程进行打包
      // 也可以设置为true，此时parallel的值就是cpus.length - 1
      parallel: true,

      terserOptions: {
        // 在这里对terser进行手动配置
        // 在这里的配置会覆盖默认 terser 中的配置
      }
    })
  ]
}

CSS压缩

CSS压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等;

CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin

# 安装
npm install css-minimizer-webpack-plugin -D

配置

plugins: [
  new CssMinimizerWebpackPlugin()
]

Scope Hoisting

Scope Hoisting从webpack3开始增加的一个新功能

功能是对作用域进行提升，并且让webpack打包后的代码更小、运行更快

默认情况下webpack打包会有很多的函数作用域，包括一些(比如最外层的)IIFE

  • 无论是从最开始的代码运行，还是加载一个模块，都需要执行一系列的函数;
  • Scope Hoisting可以将可以合并到一个模块中的函数，全部合并到一个模块中来运行, 从而节省不必要函数调用时的性能消耗
  • webpack在运行Scope Hoisting的时候，其实是依赖的对ES Module的静态分析，
  • 所以在webpack中推荐所有的模块引入和使用使用ES Module的方式来进行使用

使用Scope Hoisting非常的简单，webpack已经内置了对应的模块:

  • 在production模式下，默认这个模块就会启用
  • 在development模式下，我们需要自己来打开该模块;
plugins: [
  new webpack.optimize.ModuleConcatenationPlugin()
]
转载自:https://juejin.cn/post/7005568031917260830
评论
请登录