Bundle Side Optimization in Future JavaScript - JSConf JP 2021

Transcript

1. Bundle Side Optimization in Future JavaScript JSConf JP 2021 Yuku

   Kotani (@MonchiFC)

2. 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. 3 Web - - ECMAScript - - 3rd-party script

4. 4 - (Dead Code Elimination) - (Mangling) - (Code Splitting)

   - (Tree Shaking)

5. 5 - (Dead Code Elimination) terser, Rollup - (Mangling) terser

   - (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup

6. 6 - (Dead Code Elimination) terser, Rollup - (Mangling) terser

   - (Code Splitting) webpack, Rollup, Next.js, Nuxt - (Tree Shaking) webpack, Rollup

7. 7 DDD

8. 8 DDD

9. 9 1st Approach: Dead Code Elimination

10. 10 - - obj obj

11. 11 TypeScript obj User obj isAdult getFullname getFullName

12. 12 TS AST JavaScript TypeScript TS Compiler JS AST JavaScript

    webpack JS AST DCE JavaScript terser JS ⾒

13. 13 TS AST JavaScript TS Compiler JS AST JavaScript webpack

    JS AST DCE JavaScript terser JS ⾒ TypeScript

14. 14 TS AST JS JavaScript DCE SWC, Rome TypeScript

15. 15 1 SWC Rome

16. 16 2nd Approach: Tree Shaking

17. 17 Tree Shaking JS/TS

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

19. 19

20. 20 A. Bind-this operator

21. 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. 22 Bind-this operator TypeScript This Parameter ⾒ This :: This

    Parameter

23. 23 2 ECMAScript

24. 24 - class-based OOP - SWC Rome - ECMAScript JS-way

    https://meety.net/matches/SwBiENIgCVFp