深入浅出webpack之DLL、Terser、CssMinimizerPlugin、ScopeHoisting

___2
151 阅读2分钟

认识DLL库

  • DLL是什么

    • DLL全程是动态链接库(Dynamic Link Librar)，是为软件在Windows中实现共享函数库的一种实现方式
    • 那么webpack中也有内置DLL的功能，它指的是我们可以将可以共享，并且不经常改变的代码，抽取成一个共享的库;
    • 这个库在之后编译的过程中，会被引入到其他巧目的代码中

  • DLL库的使用分为两步

    • 第一步:打包一个DLL库;
    • 第二步:项目中引入DLL库

  • 注意：在升级到webpack4之后，已经不推荐使用，react和vue脚手架都移除了DLL库（下面有vue作者的回复）

    • DLL选项将被删除。Webpack4已经可以提供足够好的性能，在Vue CLli中维护DLL模式的成本不再合理。 5a85aefd8d9f485384564eb70f8dac4.png

Terser

  • 什么是Terser

    • Terser是一个javascript的解释（Parser）、Mangler（绞肉机）/Compressor（压缩机）的工具集
    • 也就是说，terser可以帮助我们压缩，丑化我们的代码，让我们的bundle体积更小
    • 因为terser是一个独立的工具，所以可以单独安装它

  • 通过 npm install terser安装依赖后，直接执行 terser 命令语句 npx terser ./src/message.js -o ./message.min.js，默认情况下一般都是使用默认配置项

    image.png

    • 配置项举例compress options
      • arrows — 对象里的箭头函数函数体只有一句
      • arguments — arguments 参数进行转换
      • dead_code — 删除不可达的代码 (remove unreachable code)
    • 配置项举例mangle options
      • toplevel — 顶层作用域要不要丑化
      • keep_classnames — 类名保留
      • keep_fnames — 保留函数名

  • 在webpack使用（terser-webpack-plugin）

    • webpack v5 开箱即带有最新版本的 terser-webpack-plugin。如果你使用的是 webpack v5 或更高版本，同时希望自定义配置，那么仍需要安装 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

      module.exports = {
  // 其它配置省略 
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            arguments: true,
            dead_code: true,
          },
          toplevel: true,
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
};

    • 默认情况下我们一般不去单独设置，更多options可以参看官方文档

CSS压缩

  • npm install css-minimizer-webpack-plugin -D 
     const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
     module.exports = {
        // 其它配置省略 
        mode: 'production',
        optimization: {
          minimize: true,
          minimizer: [
             new CssMinimizerPlugin(),
          ],
        },
      };

scope hoisting

  • 什么是Scope Hoisting呢?

    • Scope Hoisting从webpack3开始增加的一个新功能
    • 功能是对作用域进行提升，并且让webpack打包后的代码更小、运行更快

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

    • 无论是从最开始的代码运行，还是加载一个模块，都需要执行一系列的函数
    • Scope Hoisting可以将函数合并到一个模块中来运行

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

    • 在production模式下，默认这个模块就会启用

    • 在development模式下，我们需要自己来打开该模块

          const webpack = require('webpack');
    module.exports = {
        // 其它配置省略,
        mode:"development",
        plugins:[
             new webpack.optimize.ModuleConcatenationPlugin();
        ]
    }

示例代码

    https://gitee.com/weiLZ598/webpack-study.git
avatar
文章
阅读
粉丝