阅读 152

esbuild vs webpack

先看提速效果


上图:使用默认设置(包括缩小和源映射)从头开始制作包含 10 个three.js库副本的生产包的时间。更多信息在。
我们当前用于 Web 的构建工具比esbuild速度可能慢 10-100 倍。 项目的主要目标是开创一个构建工具性能的新时代,并在此过程中创建一个易于使用的现代 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




    
    
    
    Document


    


看看实际效果


而且webpack编译 还会随着项目体积的增大而编译耗时直线上升

原文:https://www.cnblogs.com/dshvv/p/14993424.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐