Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

esbuild打包速度碾压webpack,其优势我在另一篇文章中写过,请见为什么esbuild更快

下面介绍将webpack和esbuild结合的工具: esbuild-loader

install

$ npm i -D esbuild-loader

Quick Setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  module.exports = {
module: {
rules: [
- {
- test: /\.js$/,
- use: 'babel-loader',
- },
+ {
+ test: /\.js$/,
+ loader: 'esbuild-loader',
+ options: {
+ loader: 'jsx', // Remove this if you're not using JSX
+ target: 'es2015' // Syntax to compile to (see options below for possible values)
+ }
+ },

...
],
},
}

原理
1.esbulder-loader 调用 esbulid 去打包js 代码。
2.esbuild是go写的,可以打包成二进制文件,不用再安装go相关环境。

速度对比

Before:

After:

结论:速度快了1/3左右,esbuilder-loader只能取代babal-loader的左右,像png,css等资源无法提供支持。

评论