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
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.2k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
DROBEの生成AI活用事例 with AWS
ippey
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
53
18k
CloudNativePGを布教したい
nnaka2992
0
100
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
210
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Featured
See All Featured
Speed Design
sergeychernyshev
27
800
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
4 Signs Your Business is Dying
shpigford
182
22k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
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