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
18
8.7k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.2k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
470
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
780
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.2k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.7k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.6k
Real World Type Puzzle and Code Generation
yukukotani
4
940
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
570
Other Decks in Programming
See All in Programming
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
290
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
1
530
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
130
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
PT AI без купюр
v0lka
0
230
生成AIで日々のエラー調査を進めたい
yuyaabo
0
530
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.3k
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
250
Use Perl as Better Shell Script
karupanerura
0
690
インターフェース設計のコツとツボ
togishima
2
710
Effect の双対、Coeffect
yukikurage
5
1.4k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
220
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
51k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Side Projects
sachag
454
42k
Facilitating Awesome Meetings
lara
54
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building Adaptive Systems
keathley
43
2.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Site-Speed That Sticks
csswizardry
10
630
Git: the NoSQL Database
bkeepers
PRO
430
65k
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