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
2.9k
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
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
10
2.8k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
1.2k
Real World Type Puzzle and Code Generation
yukukotani
4
840
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
500
GraphQLスキーマ設計の勘所
yukukotani
41
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
690
先を見据えたMVPのフロントエンド開発
yukukotani
0
280
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3.1k
Other Decks in Programming
See All in Programming
C++でシェーダを書く
fadis
6
4.1k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Click-free releases & the making of a CLI app
oheyadam
2
120
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
100
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
860
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.1k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
170
as(型アサーション)を書く前にできること
marokanatani
10
2.6k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Designing the Hi-DPI Web
ddemaree
280
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Happy Clients
brianwarren
98
6.7k
The Invisible Side of Design
smashingmag
298
50k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
The Cult of Friendly URLs
andyhume
78
6k
Designing for Performance
lara
604
68k
Optimizing for Happiness
mojombo
376
70k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
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