$30 off During Our Annual Pro Sale. View Details »

Bundle Side Optimization in Future JavaScript - JSConf JP 2021

Yuku Kotani
November 27, 2021

Bundle Side Optimization in Future JavaScript - JSConf JP 2021

JSConf JP 2021

Yuku Kotani

November 27, 2021
Tweet

More Decks by Yuku Kotani

Other Decks in Programming

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. 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