Comments (5)
I doubt your webpack config is not tweaked well to do tree shaking.
I also made some experiment with bundlers:
Setup
mkdir test-date-fns && cd test-date-fns
npm init -y
npm i -D date-fns esbuild rollup @rollup/plugin-node-resolve webpack webpack-cli
index.js
import { format } from "date-fns";
import { addBusinessDays } from "date-fns/fp";
// `console.log` is required for rollup to mark side effects
console.log(format, addBusinessDays);
webpack.config.js 😒
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.webpack.js',
path: __dirname,
},
mode: 'development',
devtool: false, // required to make `eval(string)` shorter
optimization: {
usedExports: true,
}
}
Let's see:
npx esbuild index.js --bundle --outfile=bundle.esbuild.js
bundle.esbuild.js 51.7kb
Done in 252ms
npx rollup -i index.js -p node-resolve -o bundle.rollup.js
index.js → bundle.rollup.js...
created bundle.rollup.js in 3.8s
ls bundle.rollup.js
88,941 bundle.rollup.js
npx webpack
asset bundle.webpack.js 140 KiB [compared for emit] (name: main)
orphan modules 533 KiB [orphan] 467 modules
runtime modules 396 bytes 2 modules
cacheable modules 92.2 KiB
...
file | size | description |
---|---|---|
bundle.esbuild.js | 51.7kb | esbuild strips comments by default |
bundle.rollup.js | 88.94kb | - |
bundle.webpack.js | 140kb | webpack inserts a lot of runtime codes |
The difference is webpack generates a lot of /* harmony export */
things and esbuild strips comments. In short, they both do tree shaking well.
To make it fair, I also include minified results here (rollup use terser plugin, esbuild use itself):
file | size |
---|---|
bundle.esbuild.js | 22,54kb |
bundle.rollup.js | 21.95kb |
bundle.webpack.js | 21.77kb |
As you can see, they are almost the same.
from flat.
@hyrious
i will try again in the near future, following your webpack config.
from flat.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from flat.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from flat.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from flat.
Related Issues (20)
- 关于屏幕共享 HOT 2
- 回放页面无法监听到当前播放时间进度 HOT 4
- Ipad不支持屏幕共享吗 HOT 7
- 进入房间后开启录制,结束后回放的后半段是白屏。 HOT 6
- Run pnpm i failed. HOT 4
- Flat Desktop Client Now Available in Arch User Repository (AUR) HOT 4
- electron/js2c/renderer_init.js:93 Unable to load preload script: HOT 5
- Camera blank HOT 4
- [BUG](desktop/classroom-cloud): the subfiles and directories path do not match in classroom cloud setting of Desktop APP
- 开发环境一切正常-MAC打包后检测摄像头麦克风空白,权限提示没弹,MAC版本MACOS Monterey 12.6.7
- UPDATE_DOMAIN检查版本更新, 阿里云上怎么存放Windows 与 Mac 安装包格式 HOT 1
- Why phone number required? HOT 2
- 课堂开启录制报错,麻烦看一下 HOT 1
- Both chrome and edge browsers on Android don't work. HOT 5
- Is it possible to make hyperlinks in Word, PDF, PPT and Excel clickable? HOT 2
- Can I use it in the vue system built by npm? HOT 1
- error with Bluetooth HOT 3
- cannot resolve https://npmmirror.com/mirrors/electron/12.0.15/electron-v12.0.15-win32-x64.zip: status code 404 HOT 2
- How can I create an account using a Google email when that part is missing from your frontend? HOT 4
- screenshots, and tools HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flat.