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
350
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
680
僕が思い描く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
750
Other Decks in Programming
See All in Programming
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
450
はじめての Go * WASM * OCR
sgash708
1
150
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
190
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
230
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
9
1.5k
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
470
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
150
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
200
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
440
OUPC2024 Day 1 解説
kowerkoint
0
340
もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです
sublimer
0
150
Return of the Full-Stack Developer
simas
PRO
0
140
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Docker and Python
trallard
44
3.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Statistics for Hackers
jakevdp
797
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.4k
GraphQLとの向き合い方2022年版
quramy
44
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
377
70k
Testing 201, or: Great Expectations
jmmastey
42
7.3k
KATA
mclloyd
29
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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