虽然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 按需引入