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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yuku Kotani
November 27, 2021
Programming
2
3.2k
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エージェント基盤の要諦
yukukotani
8
3.3k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
6
2.5k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
10
4.9k
AI Coding Agent Enablement in TypeScript
yukukotani
21
15k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
8.1k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
790
React 19でお手軽にCSS-in-JSを自作する
yukukotani
6
990
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.4k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
8k
Other Decks in Programming
See All in Programming
CSC307 Lecture 05
javiergs
PRO
0
500
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.4k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
120
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
heimusu
7
2.8k
Implementation Patterns
denyspoltorak
0
290
CSC307 Lecture 03
javiergs
PRO
1
490
CSC307 Lecture 04
javiergs
PRO
0
660
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
130
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
230
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
690
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
Featured
See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
0
200
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
580
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
52
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
69
Design in an AI World
tapps
0
140
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
910
Navigating Weather and Climate Data
rabernat
0
110
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Speed Design
sergeychernyshev
33
1.5k
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