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
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
640
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
11
3k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7.3k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
5
1.4k
Real World Type Puzzle and Code Generation
yukukotani
4
880
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
530
GraphQLスキーマ設計の勘所
yukukotani
42
18k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
740
先を見据えたMVPのフロントエンド開発
yukukotani
0
310
Other Decks in Programming
See All in Programming
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.7k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
680
時計仕掛けのCompose
mkeeda
1
290
sappoRo.R #12 初心者セッション
kosugitti
0
250
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
10
3.5k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
550
Introduction to kotlinx.rpc
arawn
0
690
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Featured
See All Featured
Scaling GitHub
holman
459
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building an army of robots
kneath
303
45k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
BBQ
matthewcrist
87
9.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Designing Experiences People Love
moore
140
23k
KATA
mclloyd
29
14k
Typedesign – Prime Four
hannesfritz
40
2.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