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
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
370
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
700
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3.1k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.4k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.4k
Real World Type Puzzle and Code Generation
yukukotani
4
900
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
540
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
760
Other Decks in Programming
See All in Programming
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
890
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
940
AtCoder Heuristic First-step Vol.1 講義スライド
terryu16
2
760
RCPと宣言型ポリシーについてのお話し
kokitamura
2
130
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
0
130
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.4k
Identifying and Analyzing Fake OSS with Malware - fukuoka.go#21
rhykw
0
420
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
350
Gunma.web #55
tinykitten
0
120
OUPC2024 Day 1 解説
kowerkoint
0
380
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
130
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.2k
A Philosophy of Restraint
colly
203
16k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Practical Orchestrator
shlominoach
186
10k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
605
69k
Embracing the Ebb and Flow
colly
84
4.6k
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