esbuild 比webpack 快10倍

[TOC] > [esbuild.github.io](https://esbuild.github.io/getting-started/#download-a-build) ## 概述 注意,如果使用vue, 可直接使用 vite 进行构建,因为vite 就是以 esbuild 为基础的 快的原因 * 它是用 Go 语言编写的，该语言可以编译为原生代码； * 解析，打印和源映射生成全部完全并行化； * 无需昂贵的数据转换，只需很少的几步即可完成所有操作； * 编写代码时处处注意速度表现，并尽量避免不必要的配置 支持类型 * CommonJS 模块 * ES6 模块 * 使用’–bundle’与 ES6 模块的静态绑定打包 * 使用’–minify’完全压缩（空格、标识符和修饰符） * 启用’–sourcemap’时，完全支持源映射 * .jsx 文件的 JSX 到 JavaScript 转换 * 通过’–define’进行编译时标识符替换 * 使用 package.json 中的’browser’字段进行路径替换 * 自动检测 tsconfig.json 中的’baseUrl’ ## 安装 1. 如果你已安装 Go 语言工具链，可以使用’make’生成可执行文件 2. npm 安装 ``` npm install -g esbuild-linux-64 # for Linux npm install -g esbuild-darwin-64 # for macOS npm install -g esbuild-windows-64 # for Windows npm install -g esbuild-wasm # for all other platforms ``` ## 语法 ``` Usage: esbuild [options] [entry points] Options: --name=... 模块名称 --bundle 将所以依赖项打包进输出文件 --outfile=... 输出文件 (用于一个入口点) --outdir=... 输出目录 (用于多个入口点) --sourcemap 发出一个源映射 --error-limit=... 最大错误计数，0 是禁用 (默认值为 10) --target=... 语言目标 (默认 esnext) --minify 设置所有 --minify-* flags --minify-whitespace 移除空格 --minify-identifiers 缩短标识符 --minify-syntax 使用较短的等效语法 --define:K=V 解析时用 V 替换 K --jsx-factory=... 用来替换 React.createElement 的内容 --jsx-fragment=... 用来替换 React.Fragment 的内容 --trace=... 在这个文件中写入一个 CPU trace --cpuprofile=... 在这个文件中写入一个 CPU profile Example: # Produces dist/entry_point.js and dist/entry_point.js.map esbuild --bundle entry_point.js --outdir=dist --minify --sourc ``` ## 场景 ### 开发与生产 开发 ``` esbuild example.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js ``` 生产 ``` esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js ```