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的开发者 ...
随机推荐
- springboot将对象输出成文件流传到前端
springboot将对象输出成文件流传到前端 依赖 Controller service 运行 依赖 cn.hutool hutool-all 5.7.20 Controller /** * TIT ...
- AXUI - 极致原生体验的零依赖的国产 Web UI 框架，欢迎体验和共建！
AXUI:专注于快速交付的国产 Web UI 框架 在日常的前端开发中,是否遇到过以下场景: 灵感乍现,希望快速通过一点代码实现原型或功能展示: 完全个人项目,开发方式自由,追求高效与便捷: 项目目标 ...
- tp5 分页权限权限设置显示
$adminid = cookie("adminid"); $shop_id=$this->get_shop_id(); if($adminid==1){ $uid = in ...
- 将查询集SQL-存为物理 OR 临时表
最近的BI项目, 就是会涉及大量的 sql, 后台处理也全是 sql 来拼接成一张物理宽表, 然后前台也是用 sql 来做各种图形骚操作. 尤其是后台处理部分, 大量的sql, 有点尴尬的事情是, s ...
- 神经网络-反向传播BP算法推导
还是用前向算法的图, 然后仔细一看分类输出, 发现好像错了, 这该如何去反向修改权值呢? 因其是网络结构, 改变一点, 必然会引起一连串的改动, 这个过程, 如何来描述呢? 数学推导 声明变量 首先, ...
- 解决uniapp实现ios系统中低功耗蓝牙通讯失败问题
UniApp 实现 App 连接低功耗蓝牙(BLE)通讯 手头上有一个 uniapp 实现低功耗蓝牙通讯设备的项目,本来 Android 版本没问题已经上线,到了发布测试 iOS 出问题了,连接上了设 ...
- CI框架–头信息，构造器，视图
今天继续学习CI框架的相关知识,分析下面语句,将匹配到的用户,Location跳转至相应界面,header()函数用来向客户端发送原始HTTP报头. `if ($this->user ['uid ...
- 制作一个炫酷的多小球碰碰的 JS 网页，入门物理碰撞模拟和类的应用
目录 前言 先画一个圆 完善我们的类 小球动起来 最简单的碰撞计算,接触墙壁反弹 向量类的完善 检测两小球之间的碰撞 完善碰撞的效果 重复计算的问题 撞击墙壁定格问题 内存问题 随机数生成多个小球 参 ...
- Nohup 启动程序未指定输出日志，导致磁盘空间被占满的解决方案
1. 问题原因 当使用 nohup 启动程序时,默认情况下,标准输出(stdout)和标准错误(stderr)都会被重定向到 nohup.out 文件.例如: nohup python my_scri ...
- springboot 事件监听@EventListener注解用法
前言 关于@EventListener注解,百度了一下,网上的教程很多都是继承这个,实现那个的,其实根本用不着这么麻烦,所以就写了此文,如文章所讲有误,还请谅解 更多详细用法请百度一下~ 作用 关于事 ...