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 - JSConf JP 2021
Search
Yuku Kotani
November 27, 2021
Programming
2
2.7k
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
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
310
GraphQLスキーマ設計の勘所
yukukotani
39
15k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
570
先を見据えたMVPのフロントエンド開発
yukukotani
0
240
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
2.9k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
320
Other Decks in Programming
See All in Programming
Let's learn code review
riofujimon
2
570
ゆるい個人開発のススメ
kuroppe1819
10
1k
PostmanでAPIの動作確認が楽になった話
h455h1
0
180
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
400
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
Implementing Design Systems in Swift
seyfoyun
1
440
Code Reviews
bkuhlmann
4
890
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
400
禅の心を手に入れよ
eltociear
1
280
見た目から始める生産性向上
ikumatadokoro
10
1.3k
敵対的ポイフル
futabato
0
130
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
980
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Docker and Python
trallard
35
2.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
What's new in Ruby 2.0
geeforr
337
31k
Building Adaptive Systems
keathley
32
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
The Invisible Customer
myddelton
114
12k
Designing the Hi-DPI Web
ddemaree
276
33k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
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