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.8k
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
14
7k
Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ
yukukotani
4
1.2k
Real World Type Puzzle and Code Generation
yukukotani
4
840
Kuma UI が提唱する Hybrid Approach CSS-in-JS の仕組み
yukukotani
2
500
GraphQLスキーマ設計の勘所
yukukotani
41
17k
既存Webサービスのモバイルアプリ版を 1週間でリリースし、進化させてきた話
yukukotani
0
690
先を見据えたMVPのフロントエンド開発
yukukotani
0
280
Kotlin/JS の仕組み / How KotlinJS works
yukukotani
5
3.1k
Other Decks in Programming
See All in Programming
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Better Code Design in PHP
afilina
PRO
0
120
ヤプリ新卒SREの オンボーディング
masaki12
0
130
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
2
660
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
330
Featured
See All Featured
A designer walks into a library…
pauljervisheath
203
24k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Automating Front-end Workflow
addyosmani
1366
200k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Rails Girls Zürich Keynote
gr2m
94
13k
Building Applications with DynamoDB
mza
90
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Code Review Best Practice
trishagee
64
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
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