Bundle Side Optimization in Future JavaScript - JSConf JP 2021

JSConf JP 2021

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 7
   DDD
   

   View Slide

8. 8
   DDD
   

   View Slide

9. 9
   1st Approach: Dead Code Elimination
   

   View Slide

10. 10
    -
    -
    obj
    obj
    

    View Slide

11. 11
    TypeScript
    obj User
    obj isAdult getFullname
    getFullName
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. 15
    1
    SWC Rome
    

    View Slide

16. 16
    2nd Approach: Tree Shaking
    

    View Slide

17. 17
    Tree Shaking
    JS/TS
    

    View Slide

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

    View Slide

19. View Slide

20. 20
    A. Bind-this operator
    

    View Slide

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
    

    View Slide

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

    View Slide

23. 23
    2
    ECMAScript
    

    View Slide

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

    View Slide