Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bundle Side Optimization in Future JavaScript -...
Search
Yuku Kotani
November 27, 2021
Programming
2
3.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
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
2.1k
AI Coding Agent Enablement in TypeScript
yukukotani
19
11k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.5k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
550
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
840
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.8k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.7k
Real World Type Puzzle and Code Generation
yukukotani
4
950
Other Decks in Programming
See All in Programming
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
920
あのころの iPod を どうにか再生させたい
orumin
2
2.4k
画像コンペでのベースラインモデルの育て方
tattaka
3
1.7k
AIのメモリー
watany
13
1.4k
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
470
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
270
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
360
リッチエディターを安全に開発・運用するために
unachang113
1
380
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
200
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.7k
Understanding Kotlin Multiplatform
l2hyunwoo
0
260
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Balancing Empowerment & Direction
lara
2
550
Building Applications with DynamoDB
mza
96
6.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Automating Front-end Workflow
addyosmani
1370
200k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Designing for humans not robots
tammielis
253
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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