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.7k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
6.9k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
1.2k
Real World Type Puzzle and Code Generation
yukukotani
4
820
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
490
GraphQLスキーマ設計の勘所
yukukotani
41
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
670
先を見据えたMVPのフロントエンド開発
yukukotani
0
280
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3k
Other Decks in Programming
See All in Programming
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
qmuntal/stateless のススメ
sgash708
0
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
990
Honoの来た道とこれから
yusukebe
19
3k
Synchronizationを支える技術
s_shimotori
1
150
Tuning GraphQL on Rails
pyama86
2
1k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
CSC509 Lecture 08
javiergs
PRO
0
110
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.3k
Optimizing for Happiness
mojombo
376
69k
The Invisible Side of Design
smashingmag
297
50k
Done Done
chrislema
181
16k
What's new in Ruby 2.0
geeforr
342
31k
Making Projects Easy
brettharned
115
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Automating Front-end Workflow
addyosmani
1365
200k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
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