Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
Yuku Kotani
November 27, 2021
Programming
2
2.1k
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
JSConf JP 2021
Yuku Kotani
November 27, 2021
Tweet
Share
More Decks by Yuku Kotani
See All by Yuku Kotani
GraphQLスキーマ設計の勘所
yukukotani
27
6.3k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
110
先を見据えたMVPのフロントエンド開発
yukukotani
0
100
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
2.4k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
250
Other Decks in Programming
See All in Programming
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Swift Concurrency in GoodNotes
inamiy
4
1.4k
低レイヤーから始める GUI
fadis
18
9.4k
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
380
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
600
An Advanced Introduction to R
nicetak
0
1.8k
Qiita Night PHP 2023
fuwasegu
0
11k
Use KMM to call the API of the National Tax Agency
akkeylab
0
300
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
190
Git Rebase
bkuhlmann
10
1.2k
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
220
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
180k
Faster Mobile Websites
deanohume
295
29k
Teambox: Starting and Learning
jrom
124
7.9k
Building Applications with DynamoDB
mza
85
5k
Designing for Performance
lara
600
65k
For a Future-Friendly Web
brad_frost
166
7.8k
Into the Great Unknown - MozCon
thekraken
2
300
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
Bootstrapping a Software Product
garrettdimon
299
110k
Rails Girls Zürich Keynote
gr2m
87
12k
Adopting Sorbet at Scale
ufuk
65
7.8k
Support Driven Design
roundedbygravity
88
8.9k
Transcript
Bundle Side Optimization in Future JavaScript JSConf JP 2021 Yuku
Kotani (@MonchiFC)
2 Yuku Kotani (@MonchiFC) - Software Engineer @ Ubie Discovery
- AI https://ubie.app/ - TypeScript+Next.js / Kotlin+Spring Boot / GraphQL / Capacitor - Student (B3) @ - Blog https://yuku.dev 2
3 Web - - ECMAScript - - 3rd-party script
4 - (Dead Code Elimination) - (Mangling) - (Code Splitting)
- (Tree Shaking)
5 - (Dead Code Elimination) terser, Rollup - (Mangling) terser
- (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup
6 - (Dead Code Elimination) terser, Rollup - (Mangling) terser
- (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup
7 DDD
8 DDD
9 1st Approach: Dead Code Elimination
10 - - obj obj
11 TypeScript obj User obj isAdult getFullname getFullName
12 TS AST JavaScript TypeScript TS Compiler JS AST JavaScript
webpack JS AST DCE JavaScript terser JS ⾒
13 TS AST JavaScript TS Compiler JS AST JavaScript webpack
JS AST DCE JavaScript terser JS ⾒ TypeScript
14 TS AST JS JavaScript DCE SWC, Rome TypeScript
15 1 SWC Rome
16 2nd Approach: Tree Shaking
17 Tree Shaking JS/TS
18 Tree Shaking JS/TS A. - / `obj.method()` -
19
20 A. Bind-this operator
21 Bind-this operator func.bind() func.call() Stage-1 this JavaScript Bind Operator
https://yuku.dev/articles/2021-11-11/javascript-bind-this-op
22 Bind-this operator TypeScript This Parameter ⾒ This :: This
Parameter
23 2 ECMAScript
24 - class-based OOP - SWC Rome - ECMAScript JS-way
https://meety.net/matches/SwBiENIgCVFp