webpack4和5的区别

小蓝 • 2024-12-17 00:07 • 编程

一、性能方面

1、webpack5有更好的性能表现。在压缩方面，webpack5支持多线程压缩，压缩速度更快，而webpack4会存在产生瓶颈的情况。

2、模块传递中做了优化。webpack4中，办法是尽可能的压缩代码，优化优化，webpack5则使用了更好的模块树传递的方式，将每个模块构建前的 meta 信息进行了缓存，尝试减少不必要的构建。

3、webpack5默认使用 webassembly ，webpack4 则默认使用 jsonp。webassembly 比 jsonp 更快，而且据说还会消耗更少的内存。


// webpack4
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      // terser-webpack-plugin
    ]
  }
};

// webpack5
module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new WebpackMinimizerPlugin({
        minimizerOptions: {
          // terser options
        },
      }),
    ],
  },
};

二、持久缓存方面

1、webpack5默认开启持久缓存，可以大大减少构建时间。而webpack4需要配置缓存机制，能够减少构建时间，但并不会减短。

2、webpack5使用持久化缓存，能存储中间状态变化。webpack5构建完成后会保存所有模块及其依赖关系、loader/插件等的中间状态。如果下次构建时，缓存中有相同的模块，则可跳过运行相应的加载器 / 插件等，直接使用缓存，这么做大量分享文件不需要重新构建，提高了构建缓存命中率。


// webpack4
module.exports = {
  // ...
  cache: true,
};

// webpack5
module.exports = {
  // ...
  cache: {
    type: 'memory'
  },
};

三、Tree-Shaking方面

1、webpack5改善了 Tree Shaking 的性能。webpack5重构了 Tree Shaking 的算法，以此更快的找出哪些代码在构建时未使用，从而更有效地减少构建输出。

2、webpack5默认支持 pure 模块标记，这是一个新 feature 可以用户在自己的代码中进行注解，确定模块的 sideeffect，从而更好的告诉 webpack 如何进行 Tree Shaking。


// webpack4
import { animate } from './animation.js';
export function layout() {
  animate(); // Tree Shaking 可以发现这里没有使用
}

// webpack5
import { animate } from './animation.js';
export function layout() {
  animate({ // 你想用有效代码
    speed: 1000, // 它会重复并被 Tree Shaking 消除
    height: 500, // 在 Tree Shaking 之前不会发生任何改变
    maxWidth: 200 // 除非使用 pure:false 标记地址已知的 side-effect
  });
}

四、asset模块查找方式

1、webpack5通过资源解析时候有更多的可能性发现资源，所以 webpack 5 导入资源的方式发生了一点变化，默认情况下它现在会从当前目录和父级目录中的 ‘./node_modules’ 解析文件。这样做可以为你的开发带来一些便利，不过也可能会影响某些遗留代码库，你需要小心对待。

2、webpack5使用了新型 asset 模块类型来更好地管理文件模块。在webpack5中，asset资源(如图片、视频、字体)对应了一个新的输出模块类型：asset module type。这个新的类型直接放回一个 file URL，而不是通过 JavaScript 解析这个模块。这样可以直接从 HTML / CSS 中加载文件，是在新应用程序中不错的替代方案。


// webpack4
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

// webpack5
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

五、细节功能升级方面

1、webpack5新增了一个ids: ‘deterministic’的选项，它允许每次打包时生成可预测的短号，但在不同的编译中仍可以实现长期缓存。使用此选项还支持通过名称提供的模块的可读性优化。

2、webpack5增加了一些新的钩子，其中最重要的是PersistentCache插件。该插件可以将缓存持久化到磁盘上，并在每次重新构建时减少Webpack重新生成信息和AST的成本。

3、webpack5废弃了一些功能，例如：Node v8支持，废弃了require.include，废弃了动态import()中的介入。


// webpack4
new HtmlWebpackPlugin({
  parser: 'html-parser'
});

// webpack5
new HtmlWebpackPlugin({
  parser: {
    parse: htmlParser.parse
  }
});

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/271978.html