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
3k
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
AI Coding Agent Enablement in TypeScript
yukukotani
15
6k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6.9k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
440
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
760
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3.2k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.6k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
yukukotani
4
930
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
560
Other Decks in Programming
See All in Programming
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
230
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
120
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2k
AWS診断200件の分析から見る頻出指摘と対策
shoodagiri
0
110
型安全なDrag and Dropの設計を考える
yudppp
5
630
Blueskyのプラグインを作ってみた
hakkadaikon
1
120
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
180
知識0からカンファレンスやってみたらこうなった!
syossan27
5
320
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.3k
Cache Strategies with Redisson & Exposed
debop
0
120
なぜHono×GraphQLを選んだのか?
junichi_fukushima
0
860
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
5.7k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
56
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Bash Introduction
62gerente
613
210k
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