esbuild是什么

esbuild官方描述的作用就是：一个JavaScript的打包和和压缩工具。
esbuild使用golang开发，在打包的速度上非常快，我们熟悉的vite工具在dev模式下就是使用esbuild进行打包。

中文文档：esbuild - 极速 JavaScript 打包器 (docschina.org)

esbuild的主要特征

  • 在没有缓存的情况也能有极致的性能
  • 支持ES6的Tree shaking
  • 原生支持typescript和jsx打包
  • 支持Source Map
  • 代码压缩
  • 支持定义插件

ES6的Tree shaking

  • ES6的Tree shaking是一种用于优化JavaScript代码的技术。它可以在打包时自动去除未使用的代码，通过静态分析代码来判断哪些代码被使用，哪些代码没有被使用。然后，它可以将未使用的代码从打包后的代码中删除，以减少文件大小并优化性能。
  • Tree shaking基于ES6模块系统的静态特性，这是因为ES6模块系统的静态特性使得代码的依赖关系在编译时就可以确定。要实现Tree shaking，需要确保代码使用ES6的import和export语法，而不是CommonJS的require语法。因为在CommonJS中，模块的依赖关系是在运行时确定的，无法进行静态分析。
  • 使用Tree shaking技术可以减少打包后的文件大小，提高应用程序的性能。但需要注意的是，虽然Tree shaking可以去除未使用的代码，但如果代码中包含了副作用（side effects），这些代码就不能被去除。因此，在使用Tree shaking时，需要仔细考虑代码中是否存在副作用，并进行适当的配置和处理。

Source Map

Source Map就是一个信息文件，里面储存着位置信息，也就是说，Source Map文件中存储着代码压缩混淆前后的对应关系。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

最佳实践

  1. 安装esbuild
    pnpm add esbuild
  2. package.json中添加
    {
	  "scripts": {
			"build": "ts-node --esm build.ts"
	  },
}
  3. 项目根目录中编写一个build.ts文件
    import { build } from 'esbuild';  

build({  

  entryPoints: ['src/index.ts'], // 入口文件路径  

  bundle: true, // 打包成单个文件  

  minify: true, // 压缩代码  

  sourcemap: true, // 生成sourcemap  

  outfile: 'dist/bundle.js', // 输出文件路径  

}).catch((err) => {  

  console.error(err);  

  process.exit(1);  

});
  4. 运行pnpm build打包
    image.png

总结

  1. esbuild是一个JavaScript的打包工具
  2. 使用golang编写的
  3. 原生支持typescript和Jsx
  4. 在没有缓存的情况下也能有极致的速度
  5. 支持ES6的Tree Shaking
  6. 支持Source Map
  7. 代码压缩