esbuild vs webpack
先看提速效果
上图：使用默认设置（包括缩小和源映射）从头开始制作包含 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编译 还会随着项目体积的增大而编译耗时直线上升
esbuild vs webpack的更多相关文章
- 上周 GitHub 热点速览 vol.07：GitHub 官方 CLI beta 版已发布
摘要:GitHub Trending 上周看点,GitHub 官宣 CLI 已发布 beta 版,前端新晋高性能打包神器 esbuild 宣战 Webpack&Parcel,微软.Facebo ...
- 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)
本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序. 在本教程 ...
- 什么，你还使用 webpack？别人都在用 vite 搭建项目了
一.vite 到底是干嘛的? vite 实际上就是一个面向现代浏览器,基于 ES module 实现了一个更轻快的项目构建打包工具. vite 是法语中轻快的意思. vite 的特点: 1.轻快的冷服 ...
- webpack 项目接入Vite的通用方案介绍(上)
愿景 希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本 在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具 读者可直接fo ...
- 基于 esbuild 的 universal bundler 设计
--字节跳动前端 Byte FE :杨健 背景 由于 Lynx(公司自研跨端框架)编译工具和传统 Web 编译工具链有较大的差别(如不支持动态 style 和动态 script 基本告别了 bundl ...
- 轻量迅捷时代，Vite 与Webpack 谁赢谁输
你知道Vite和Webpack吗?也许有不少"程序猿"对它们十分熟悉. Webpack Webpack是一个JavaScript应用程序的静态模块打包工具,它会对整个应用程序进行依 ...
- webpack与vite的对比
vite与webpack的打包原理: vite: 基于游览器原生ES Module,利用游览器解析import,服务器端按需编译返回 webpack: 逐级递归识别依赖,构建依赖图谱->转化AS ...
- Webpack与Vite热更新差异对比
随着项目的日渐迭代,项目整体的代码量也会越来越多,从而导致项目体积越来越大:在Webpack时代,很多人会对历史项目(巨型项目)感到头疼,因为往往巨型项目在本地开发调试的时候会因为本地代码的修改触发H ...
- 项目脚手架之webpack
分享版本: webpackV4.X (企企项目PC端-webpack: 4.29.6.webpack-cli: 3.1.1) 分享初衷: 本文我们结合企企项目(下面相关代码片段主要取至我们项目) ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- 面试官：如果某个业务量突然提升100倍QPS你会怎么做？
"假设你负责的系统,某个业务线的QPS突然暴增100倍,你会怎么应对?" --这是上周朋友去面试,被问到一道题,他答了"加机器扩容",结果面试官眉头一皱:&qu ...
- cmd窗口中执行shell文件的方式
使用cmd打开窗口后,使用powershell切入ps状态,然后使用sh命令即可执行shell文件,切入ps状态所在的目录为Administrator目录 bat设置Path变量 设置好sh.exe的 ...
- CSharp_base
C# 基础篇 枚举(enum) 枚举是一个被命名的整形常量的集合 用于表示: 状态 类型 申明枚举:创建一个自定义的枚举类型 申明枚举变量:使用申明的自定义的枚举类型,来创建一个枚举变量 语法 //语 ...
- 腾讯Java后端一面，被速通了！
分享一篇腾讯的后端Java一面凉经,被速通了, 大家感受一下难度如何. 这次面试的考察覆盖了从 项目经验的深度挖掘(面试官非常看重 STAR 法则的应用)到 扎实的计算机基础(经典的 TCP/UDP ...
- 深度解析Maven版本仲裁机制：核心规则与原理
结论先行 Maven的版本仲裁机制本质是通过 依赖路径 和 声明顺序 的优先级规则,自动解决多版本依赖冲突.其核心规则为: 最短路径优先:依赖树中路径最短的版本生效. 相同路径则先声明优先:路径长度相 ...
- 7.9K star！免费解锁Cursor Pro功能，这个开源神器太强了！
嗨,大家好,我是小华同学,关注我们获得"最新.最全.最优质"开源项目和高效工作学习方法 "无需付费即可畅享AI编程神器Cursor的Pro功能,支持Windows/mac ...
- 通过cmd/批处理 开启关闭windows中的mysql数据库
目录 cmd 开启关闭mysql 批处理 开启关闭mysql 每次通过服务开启关闭mysql太麻烦,可以通过cmd或批处理来解决 cmd 开启关闭mysql cmd需要使用管理员打开 //开启mysq ...
- LinqHelper拓展
public static class LinqHelper { //NHibernate.Hql.Ast.HqlBooleanExpression public static Expression& ...
- vue3 基础-CompositionAPI - setup
之前介绍的是一些关于代码复用的问题, 如 mixin, plugin 等. 从本篇开始呢, 就将来学习一波 vue3 的新特性, 即 Composition API 咱之前的写法, 即把各种逻辑, 方 ...
- 基于PySyft与TensorFlow的医疗数据协同分析系统实现教程
1. 引言:医疗数据协同分析的挑战与机遇 在医疗信息化进程中,数据孤岛问题日益突出.各医疗机构积累的海量医疗数据受限于隐私法规(如HIPAA.GDPR)无法直接共享,形成数据壁垒.联邦学习技术的出现为 ...