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.8k
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
9
2.3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.5k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
1.1k
Real World Type Puzzle and Code Generation
yukukotani
4
790
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
450
GraphQLスキーマ設計の勘所
yukukotani
40
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
640
先を見据えたMVPのフロントエンド開発
yukukotani
0
270
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3k
Other Decks in Programming
See All in Programming
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
360
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
390
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
200
The Shape of a Service Object
inem
0
440
Ruby Parser progress report 2024
yui_knk
2
200
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
160
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
430
Jakarta EE meets AI
ivargrimstad
1
250
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
140
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Atom: Resistance is Futile
akmur
261
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
Fireside Chat
paigeccino
31
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Designing for humans not robots
tammielis
248
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Thoughts on Productivity
jonyablonski
66
4.2k
Making Projects Easy
brettharned
113
5.8k
Done Done
chrislema
180
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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