<

esbuild-loader: ⚡️ 使用esbuild加速你的网页构建

( 如需查看英文版本，请 点击这里 )

esbuild-loader

使用esbuild加速你的网页构建！🔥

esbuild是一个用Go编写的JavaScript绑定器，支持快速的ESNext和TypeScript透明和JS缩小。

esbuild-loader通过提供更快速的透明（例如babel-loader/ts-loader）和缩小（例如更简洁）替代方案，您可以在网页包构建中利用esbuild的速度！

好奇你的构建速度会快多少？看看用户在说什么。

🤫 嘘！想用esbuild为你的Node.js充电吗？

签出我们的新项目tsx，这是一个esbuild增强的Node.js运行时，可以立即运行TypeScript！

通过以下方式支持该项目：⭐️ 主演和分享。跟我来看看还有什么很酷的项目，我的工作！❤️

🚀 Install

npm i -D esbuild-loader

🚦 快速设置

Javascript和JSX透明（例如Babel）

In webpack.config.js:

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)
+         }
+       },

        ...
      ],
    },
  }

TypeScript和TSX

In webpack.config.js:

module.exports = {
    module: {
      rules: [
-       {
-         test: /\.tsx?$/,
-         use: 'ts-loader'
-       },
+       {
+         test: /\.tsx?$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'tsx',  // Or 'ts' if you don't need tsx
+           target: 'es2015'
+         }
+       },

        ...
      ]
    },
  }

Configuration

如果您有一个tsconfig.json文件，esbuild-loader将自动检测到它。

或者，您也可以通过tsconfigRaw选项直接传递它：

{
      test: /\.tsx?$/,
      loader: 'esbuild-loader',
      options: {
          loader: 'tsx',
          target: 'es2015',
+         tsconfigRaw: require('./tsconfig.json')
      }
  }

⚠️ esbuild只支持tsconfig选项的子集（请参见TransformOptions接口），不支持type-checks。建议使用type-awareIDE或tsc --noEmit代替type-checking。还建议通过esbuild文档在tsconfig中启用isolatedModules和esModuleInterop选项。

JS缩小（例如，精简）

你可以替换JS迷你们，比如Terser或UglifyJs。检查基准测试，看看esbuild有多快。target选项告诉esbuild它可以使用更新的JS语法来执行更好的缩小。

In webpack.config.js:

+ const { ESBuildMinifyPlugin } = require('esbuild-loader')

  module.exports = {
    ...,

+   optimization: {
+     minimizer: [
+       new ESBuildMinifyPlugin({
+         target: 'es2015'  // Syntax to compile to (see options below for possible values)
+       })
+     ]
+   },
  }

💁♀️ Protip：使用加载程序的minify插件in-place来传输JS

如果您没有使用TypeScript、JSX或Webpack不支持的任何语法，您也可以利用缩小器进行透明（作为Babel的替代）。它将更快，因为需要处理的文件更少，并且将产生更小的输出，因为polyfills在整个构建中只绑定一次，而不是每个文件。只需在minifier上设置target选项来指定所需的支持级别。

CSS Minification

根据您的设置，有两种缩小CSS的方法。您应该已经使用css-loader在构建中设置了CSS。

CSS assets

如果您的CSS被提取并作为CSS文件发出，您可以通过启用css选项，将类似css-minimizer-webpack-plugin或optimize-css-assets-webpack-plugin的CSS缩小插件替换为相同的ESBuildMinifyPlugin。

假设CSS是使用类似MiniCssExtractPlugin的东西提取的，在webpack.config.js：

const { ESBuildMinifyPlugin } = require('esbuild-loader')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  module.exports = {
    ...,

    optimization: {
      minimizer: [
        new ESBuildMinifyPlugin({
          target: 'es2015',
+         css: true  // Apply minification to CSS assets
        })
      ]
    },

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader'
          ]
        }
      ]
    },

    plugins: [
      new MiniCssExtractPlugin()
    ]
  }

JS中的CSS

如果您的CSS不是作为CSS文件发出的，而是使用类似style-loader的东西通过JS加载的，那么您可以使用加载程序进行缩小。

In webpack.config.js:

module.exports = {
    ...,

    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            'css-loader',
+           {
+             loader: 'esbuild-loader',
+             options: {
+               loader: 'css',
+               minify: true
+             }
+           }
          ]
        }
      ]
    }
  }

Examples

如果您想看到使用esbuild-loader作为基本JS、React、TypeScript或Next.js的工作网页构建，请查看示例repo。

自带esbuild（高级）

esbuild-loader附带了一个经过测试的esbuild版本。然而，esbuild有一个频繁的发布节奏，当我们试图跟上重要的发布时，它很容易过时。

使用加载器中的implementation选项或缩小插件来传递您自己的esbuild版本（例如，一个更新的版本）。

⚠️ esbuild还不稳定，不同版本之间可能存在巨大差异。使用不同版本的esbuild不能保证有效。

+ const esbuild = require('esbuild')

  ...

  module.exports = {
    ...,

    module: {
      rules: [
        {
          test: ...,
          loader: 'esbuild-loader',
          options: {
            ...,
+           implementation: esbuild
          }
        }
      ]
    }
  }

一旦esbuild达到稳定版本，implementation选项将被删除。相反，esbuild将成为对等依赖项，因此您始终提供自己的。

⚙️ Options

Loader

加载程序支持esbuild中的所有转换选项。

Note:

  • Source-maps通过devtool为您自动配置。sourcemap/sourcefile选项被忽略。
  • 根tsconfig.json会自动检测到。你不需要传入tsconfigRaw，除非它在不同的路径中。

以下是一些常见配置和自定义选项：

target

Type: string | Array<string>

Default: 'es2015'

目标环境（例如es2016、chrome80、esnext）。

请在esbuild文档中阅读更多信息。

loader

Type: 'js' | 'jsx' | 'ts' | 'tsx' | 'css' | 'json' | 'text' | 'base64' | 'file' | 'dataurl' | 'binary' | 'default'

Default: 'js'

用于处理文件的加载程序。有关可能的值，请参见类型。

请在esbuild文档中阅读更多信息。

jsxFactory

Type: string

Default: React.createElement

自定义要使用的JSX工厂函数名。

请在esbuild文档中阅读更多信息。

jsxFragment

Type: string

Default: React.Fragment

自定义要使用的JSX片段函数名。

请在esbuild文档中阅读更多信息。

implementation

Type: { transform: Function }

自定义esbuild-loader选项。

使用它传递不同的esbuild版本。

MinifyPlugin

加载程序支持esbuild中的所有转换选项。

target

Type: string | Array<string>

Default: 'esnext'

目标环境（例如'es2016'，['chrome80', 'esnext']）

请在esbuild文档中阅读更多信息。

以下是一些常见配置和自定义选项：

minify

Type: boolean

Default: true

启用JS缩小。启用下面的所有minify*标志。

要对缩小进行细微的控制，请禁用此选项并启用下面需要的特定缩小。

请在esbuild文档中阅读更多信息。

minifyWhitespace

Type: boolean

通过删除空白缩小JS。

minifyIdentifiers

Type: boolean

通过缩短标识符来缩小JS。

minifySyntax

Type: boolean

使用等效但较短的语法缩小JS。

legalComments

Type: 'none' | 'inline' | 'eof'

Default: 'inline'

请在esbuild文档中阅读更多信息。

sourcemap

Type: boolean

默认：网页devtool配置

是否发射sourcemaps。

css

Type: boolean

Default: false

自定义esbuild-loader选项。

是否缩小CSS文件。

include

Type: string | RegExp | Array<string | RegExp>

自定义esbuild-loader选项。

筛选要包含在缩小中的资产

exclude

Type: string | RegExp | Array<string | RegExp>

自定义esbuild-loader选项。

筛选要从缩小中排除的资产

implementation

Type: { transform: Function }

自定义esbuild-loader选项。

使用它传递不同的esbuild版本。

🙋‍♀️ FAQ

可以使用esbuild插件吗？

没有。esbuild插件仅在构建API中可用。并且esbuild-loader使用转换API而不是构建API有两个原因：

  1. 构建API用于创建JS包，这就是Webpack所做的。如果您想使用esbuild的构建API，请考虑直接使用esbuild而不是Webpack。
  2. 构建API直接从file-system读取，但网页包加载程序操作in-memory。网页包加载器本质上只是以source-code作为输入调用的函数。不从file-system读取允许加载程序可链接。例如，使用vue-loader编译单个文件组件（.vue个文件），然后使用esbuild-loader只传输SFC的JS部分。

可以使用esbuild的注入选项吗？

否。inject选项仅在构建API中可用。esbuild-loader使用转换API。

但是，您可以使用与ProvidePlugin等效的网页包。

如果您正在使用React，请查看这个示例，了解如何在组件中auto-importReact。

可以使用Babel插件吗？

不需要。如果你真的需要它们，可以考虑将它们移植到网页包加载器。

请不要链接babel-loader和esbuild-loader。速度增益来自替换babel-loader。

为什么我没有得到100倍的速度提高广告？

将esbuild作为独立捆绑程序运行与esbuild-loader+网页包完全不同：

  • esbuild经过高度优化，用Go编写，并编译为本机代码。请在此处阅读更多信息。
  • esbuild-loader由Webpack在JS运行时中处理，该运行时对每个文件应用esbuild转换。最重要的是，网页包配置中可能还有其他加载程序和插件会减慢速度。

使用任何JS绑定器都会带来一个瓶颈，使得无法达到这些速度。然而，esbuild-loader仍然可以通过消除由babel-loader、ts-loader、Terser等创建的瓶颈来加快构建速度。

会有type-checking支持吗？

根据esbuild常见问题解答，它将不受支持。

考虑以下type-checking备选方案：

  • 使用内置了livetype-checking的IDE，如VSCode或WebStorm
  • 运行tsc --noEmit进行类型检查
  • 使用fork-ts-checker-webpack-plugin将type-checking集成到您的网页包构建中，作为一个单独的过程

🌱 其他网页包插件

instant-mocha

Webpack-integrated摩卡test-runner，支持网页包5。

webpack-localize-assets-plugin

本地化/i18对你的网页版本进行本地化。针对多个地区进行了优化！