JSConf JP 2021
Bundle Side Optimizationin Future JavaScriptJSConf JP 2021Yuku Kotani (@MonchiFC)
View Slide
2Yuku Kotani (@MonchiFC)- Software Engineer @ Ubie Discovery- AI https://ubie.app/- TypeScript+Next.js / Kotlin+Spring Boot / GraphQL / Capacitor- Student (B3) @- Blog https://yuku.dev2
3Web-- ECMAScript-- 3rd-party script
4- (Dead Code Elimination)- (Mangling)- (Code Splitting)- (Tree Shaking)
5- (Dead Code Elimination) terser, Rollup- (Mangling) terser- (Code Splitting) webpack, Rollup, Next.js, Nuxt- (Tree Shaking) webpack, Rollup
6- (Dead Code Elimination) terser, Rollup- (Mangling) terser- (Code Splitting) webpack, Rollup, Next.js, Nuxt- (Tree Shaking) webpack, Rollup
7DDD
8DDD
91st Approach: Dead Code Elimination
10--objobj
11TypeScriptobj Userobj isAdult getFullnamegetFullName
12TS ASTJavaScriptTypeScriptTS CompilerJS ASTJavaScriptwebpackJS ASTDCEJavaScriptterserJS⾒
13TS ASTJavaScriptTS CompilerJS ASTJavaScriptwebpackJS ASTDCEJavaScriptterserJS⾒TypeScript
14TS AST JSJavaScriptDCESWC, RomeTypeScript
151SWC Rome
162nd Approach: Tree Shaking
17Tree ShakingJS/TS
18Tree ShakingJS/TSA.- /`obj.method()`-
19
20A. Bind-this operator
21Bind-this operatorfunc.bind() func.call() Stage-1thisJavaScript Bind Operatorhttps://yuku.dev/articles/2021-11-11/javascript-bind-this-op
22Bind-this operatorTypeScript This Parameter ⾒ This:: This Parameter
232ECMAScript
24- class-based OOP- SWC Rome- ECMAScriptJS-wayhttps://meety.net/matches/SwBiENIgCVFp