Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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