先看提速效果
上圖：使用默認設置（包括縮小和源映射）從頭開始制作包含 10 個three.js庫副本的生產包的時間。更多信息在這里。
我們當前用於 Web 的構建工具比esbuild速度可能慢 10-100 倍。esbuild bundler 項目的主要目標是開創一個構建工具性能的新時代，並在此過程中創建一個易於使用的現代 bundler。
來個demo
比較代碼
packge.json
{
"name": "esbdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-esbuild": "npx esbuild ./src/main.js --bundle --outfile=/build_esbuild/main.js",
"build-webpack": "npx webpack ./src/main.js -o build_webpack --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"esbuild": "^0.12.15",
"webpack": "^5.44.0",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"chalk": "^4.1.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"uuid": "^8.3.2"
}
}
utils.js
export const add = (x,y)=>{
return x+y
}
main.js
import {add} from './utils';
import _ from 'lodash';
import moment from 'moment';
import chalk from 'chalk';
import { v4 as uuidv4 } from 'uuid';
const res = add(1,2);
const res1 = _.divide(10,2);
const res2 = uuidv4();
const time = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log(res, res1, res2, time);
console.log(chalk.blue('Hello world!'));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./build_esbuild/main.js"></script>
</body>
</html>
看看實際效果
而且webpack編譯 還會隨着項目體積的增大而編譯耗時直線上升