原因:

突然想使用esbuild编译的起因是，webpack编译的时候经常卡在这一步
卡在这一行 92% chunk asset optimization terserplugin
然后会停顿个几十秒突然好了，使用esbuild可以原生编译，

esbuild的相关文章：

https://zhuanlan.zhihu.com/p/139219361

过程:

先 npm i esbuild-loader --dev
然后在webpack的生产环境的配置文件里面

const {ESBuildPlugin, ESBuildMinifyPlugin} = require('esbuild-loader');

以及

module: {
      rules: [
          {
                test: /\.(js|jsx)$/,
                loader: 'esbuild-loader',
                options: {
                    loader: 'jsx',
                    target: 'es2015', 
                    jsxFactory: 'React.createElement',
                    jsxFragment: 'React.Fragment'
                },
          }
      ]
}

plugins: [
        new ESBuildPlugin()
]

optimization: {
        minimize: true,
        minimizer: [
            new ESBuildMinifyPlugin({
                target: 'es2015',
                minifyWhitespace: true
            })
        ]
}

这样配置了之后，以前配置的什么对jsx使用babel-loader，都不需要了

出现的问题

1. 编译的时候报了下面的错

   
   image.png

打包的时候报错缺少core-js这个包，于是 npm i core-js
安装完成后发现还是同样的错误

解决： npm i core-js@2 需要core-js 的版本为2.x，才会有fn这个文件夹

2. 编译完成后部署上去，页面直接白屏，chorme控制台报错 React is not defined
   在这里找到了相同的问题 https://github.com/privatenumber/esbuild-loader/issues/62
   image.png
   所以出现这个问题的原因是，你的组件没有import React from 'react' 写上，他这里的解决方法是，所有涉及到jsx的地方，顶部都加上这句话

还有另外的解决方法

image.png

使用webpak的ProvidePlugin自动补上React

plugins: [
        new webpack.ProvidePlugin({
            React: 'react'
        }),
        new ESBuildPlugin()
]

3. 编译后有些样式不对，公司里面的内部组件库里内部使用了rc-tree(v1.4)，后来项目里又手动装了个rc-tree(v4.0)，两个版本不一样，导致一个依赖这个组件的Transfer组件样式错乱，并且元素创建的也不对，看dom结构明显是v4.0的那个，也就是说，内部组件库依赖的低版本rc-tree被换成了高版本的那个。

这个问题在没有换esbuild之前都没有出现，我还以为是我给webpack 配置了splitChunks的缘故，但是注释掉重新部署还是不对。

最后没办法了，只能别名安装 rc-tree(v4.0)，然后把代码里相关的名字都改掉

效果：用了esbuild后，我的项目编译时间少了40秒左右