tree-shaking剪裁技术

 

一、需求背景与收益

Tree-shaking剪裁无用js与css，目前在dc组实现，首页效果如下：

1、原文件5.19M，优化后2.61M

2、gzip文件988.25KB，  优化后665.63KB

3、Js文件减少三分之一，项目越久收益越高

4、运行速度和用户体验都会提升

5、Lighthouse性能评分提升大概4-8分

6、属于攻坚技术难点

 

二、实现步骤：

1、打包esm格式，由于历史工具bit14与15默认打包commonjs格式，造成Tree-snaking失效，修改编译器打包成esmodule格式

⑴ header、footer所有公共包用bit15打包esm格式，使用编译器 learnbit.react/envs/react-esm

Bit. Composable software platform.

⑵ dc组件库用bit14打包esm格式，使用编译器mik-technology.compile-react-esm/compilers/react 

Bit. Composable software platform.

⑶ michaels-ssr使用rollup打包esm格式

2、适配项目，nextjs12不支持esm包，需引入第三方插件，打包时解析esmodule包，next13将此插件内置到核心库

⑴ next项目用中间件next-transpile-modules解析esm包

⑵ spa项目会自动解析esm 包，只需解决bug

⑶ 推广各组使用测试包，会有一波bug