前端性能揭秘
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

按需引入

虽然CSS没有办法像JavaScript那样通过Tree Shaking自动实现按需引入,但是可以借助一些工具来实现类似的效果。例如,使用vite-plugin-import插件不仅可以帮助CSS实现按需引入,还可以指定CSS的路径。

首先引入vite-plugin-import插件。

然后修改vite.config.js。

重新构建后可以看到,CSS文件的体积从554KB降到了74.2KB,3G下的渲染完成时间从5.98s降至2.53s,如图1-13所示。

图1-13 按需引入