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
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
9
3k
AI Coding Agent Enablement in TypeScript
yukukotani
19
12k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
7.6k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
3
600
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
860
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
12
3.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.8k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.7k
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
18
9k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
概念モデル→論理モデルで気をつけていること
sunnyone
2
280
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
Navigating Dependency Injection with Metro
zacsweers
3
1k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Documentation Writing (for coders)
carmenintech
74
5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
142
24k
Why Our Code Smells
bkeepers
PRO
339
57k
Side Projects
sachag
455
43k
The Invisible Side of Design
smashingmag
301
51k
Embracing the Ebb and Flow
colly
87
4.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Facilitating Awesome Meetings
lara
55
6.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