esbuild + swc 能有多快?

6,341 阅读3分钟

本文正在参加「金石计划」

前端工具层出不穷,之前有常用的打包工具webpack,现在有了速度更快的vitevite的开发模式是基于esBuild编译的,打包又是基于rollup,启动项目是很快的。

esbuild为什么这么快

在esbuild的官方介绍中打包threejs 只需要0.37秒 无限接近于亚索的Q技能冷却时间可以说是很快了。

image.png

esbuild是go语言编写的并且是多线程执行,性能是js的好几十倍,所以很快。

  • 无需缓存即可实现基础打包
  • 支持 ES6 跟 CommonJS 模块
  • 支持ES 6 Tree Shaking
  • 体积小
  • 插件化
  • 其他
  • 内置支持编译 jsx
SWC

SWC则宣称其比Babel快20倍(四核情况下可以快70倍)

image.png

swc是用rust写的,所实现的功能跟babel一样,es6语法转es5,但是速度比babel更快,前端基建工具使用rust的是越来越多了,未来可能还会有一个替代postCss的😂。

那如果把esbuild + swc结合起来构建那岂不是接近光速 我们来try try

实例
npm install @swc/core esbuild @swc/helpers

其中,@swc/core 是 swc 的核心包,用于编译 JavaScript 和 TypeScript 代码;esbuild 是一个快速的 JavaScript 和 TypeScript 构建工具;@swc/helpers 是 swc 的辅助包,用于转换 JSX 代码。

import esbuild from 'esbuild'//打包工具
import swc from '@swc/core'//类似于babel es6 转 es5
import fs from 'node:fs'
await esbuild.build({
    entryPoints: ['./index.ts'], //入口文件
    bundle: true, //模块单独打包
    loader: {
        '.js': 'js',
        '.ts': 'ts',
        '.jsx': 'jsx',
        '.tsx': 'tsx',
    },
    treeShaking:true,
    define: {
       'process.env.NODE_ENV': '"production"',
    },
    plugins: [
        {
            //实现自定义loader
            name: "swc-loader",
            setup(build) {
                build.onLoad({ filter: /\.(js|ts|tsx|jsx)$/ }, (args) => {
                   // console.log(args);
                    const content = fs.readFileSync(args.path, "utf-8")
                    const { code } = swc.transformSync(content, {
                        filename: args.path
                    })
                    return {
                        contents: code
                    }
                })
            },
        }
    ],
    outdir: "dist"
})

测试demo

export const a:number = 1
export const b:string = 'ikun'
let x = 1
let fn = () => 123
console.log(x,fn);

转移之后的

export var a = 1;
export var b = "ikun";
var x = 1;
var fn = function() {
  return 123;
};
console.log(x, fn);

高级用法

除了上述基本用法之外,swc 和 esbuild 还提供了许多高级用法,可以更好地满足我们的构建需求。

插件系统

swc 和 esbuild 都提供了插件系统,可以通过插件来扩展其功能。例如,swc 的插件可以用于优化代码,提高性能。esbuild 的插件则可以用于处理特定类型的文件,或自定义转换规则。

缓存系统

swc 和 esbuild 都提供了缓存系统,可以减少重复编译时间。当文件内容没有发生变化时,swc 和 esbuild 会从缓存中读取已编译的代码,以提高构建速度。

Watch 模式

swc 和 esbuild 都支持 Watch 模式,可以在文件发生变化时自动重新编译代码。Watch 模式可以减少手动运行构建命令的频率,提高开发效率。

自定义插件

最后,我们可以通过编写自定义插件来扩展 swc 和 esbuild 的功能。例如,可以编写一个插件来自动引入 CSS 文件,或者优化 JavaScript 代码。自定义插件可以根据实际需求进行编写,以更好地满足项目的构建需求。

结论

本文介绍了如何使用 swc 和 esbuild 来构建一个简单的 TypeScript 应用程序,并讨论了一些高级用法。swc 和 esbuild 都是现代前端构建工具中的代表,它们都提供了快速编译、代码压缩等功能,可以有效提高应用程序的性能。通过学习 swc 和 esbuild 的使用方法,我们可以更好地进行前端工程化开发,提高开发效率和代码质量。