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
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
940
Real World Type Puzzle and Code Generation
yukukotani
4
750
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
400
GraphQLスキーマ設計の勘所
yukukotani
39
16k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
620
先を見据えたMVPのフロントエンド開発
yukukotani
0
260
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3k
Kotlin/JS イケイケフロントエンド開発 / Ikeike Frontend Development in KotlinJS
yukukotani
0
360
Other Decks in Programming
See All in Programming
CSC307 Lecture 08
javiergs
PRO
0
330
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
小さな開発会社を作った理由
polidog
0
1.9k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
英語
s_shimotori
1
220
リハビリmruby
kishima
1
160
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Code Reviewing Like a Champion
maltzj
517
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
The World Runs on Bad Software
bkeepers
PRO
63
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Ruby is Unlike a Banana
tanoku
96
10k
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