Bundle Side Optimization in Future JavaScript - JSConf JP 2021

by Yuku Kotani

Slide 1

Slide 1 text

Bundle Side Optimization in Future JavaScript JSConf JP 2021 Yuku Kotani (@MonchiFC)

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Web - - ECMAScript - - 3rd-party script

Slide 4

Slide 4 text

4 - (Dead Code Elimination) - (Mangling) - (Code Splitting) - (Tree Shaking)

Slide 5

Slide 5 text

5 - (Dead Code Elimination) terser, Rollup - (Mangling) terser - (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup

Slide 6

Slide 6 text

6 - (Dead Code Elimination) terser, Rollup - (Mangling) terser - (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup

Slide 7

Slide 7 text

7 DDD

Slide 8

Slide 8 text

8 DDD

Slide 9

Slide 9 text

9 1st Approach: Dead Code Elimination

Slide 10

Slide 10 text

10 - - obj obj

Slide 11

Slide 11 text

11 TypeScript obj User obj isAdult getFullname getFullName

Slide 12

Slide 12 text

12 TS AST JavaScript TypeScript TS Compiler JS AST JavaScript webpack JS AST DCE JavaScript terser JS ⾒

Slide 13

Slide 13 text

13 TS AST JavaScript TS Compiler JS AST JavaScript webpack JS AST DCE JavaScript terser JS ⾒ TypeScript

Slide 14

Slide 14 text

14 TS AST JS JavaScript DCE SWC, Rome TypeScript

Slide 15

Slide 15 text

15 1 SWC Rome

Slide 16

Slide 16 text

16 2nd Approach: Tree Shaking

Slide 17

Slide 17 text

17 Tree Shaking JS/TS

Slide 18

Slide 18 text

18 Tree Shaking JS/TS A. - / `obj.method()` -

Slide 19

Slide 19 text

Slide 20

Slide 20 text

20 A. Bind-this operator

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

22 Bind-this operator TypeScript This Parameter ⾒ This :: This Parameter

Slide 23

Slide 23 text

23 2 ECMAScript

Slide 24

Slide 24 text

24 - class-based OOP - SWC Rome - ECMAScript JS-way https://meety.net/matches/SwBiENIgCVFp