开启treeshaking时Vuetify的main.sass gzip压缩后30kb是否正常？

体积合理性判断 #

你这个30KB gzip后的Vuetify样式体积属于完全正常的范围。
开启TreeShaking后，根据实际用到的Vuetify组件数量不同，gzip后的样式体积一般在15KB~50KB区间浮动，30KB属于中等使用量的常规水平，没有明显异常。

关于是否包含被TreeShaking移除的组件样式 #

这个要分配置情况判断：

如果你是按照Vuetify官方推荐的按需引入方案配置（Vite项目用vite-plugin-vuetify、Vue CLI项目用vue-cli-plugin-vuetify，且没有手动全量导入Vuetify的完整样式文件），那么打包后的样式文件里不会包含已被TreeShaking移除的组件的对应样式，所有样式都是你实际用到的组件的样式集合。
如果你手动全量引入了vuetify/styles这类全局样式文件，那么即使JS层面的组件被TreeShaking移除了，全量的样式还是会全部打进包里，这种情况才会存在冗余样式。

优化建议 #

• 优先确认配置合规：不要在项目入口手动编写全量样式导入代码import 'vuetify/styles'，依赖官方配套插件自动按需注入样式，是保障样式也能正常TreeShaking的核心前提。
• 冗余校验可以用打包分析工具：Webpack生态用webpack-bundle-analyzer，Vite生态用rollup-plugin-visualizer，可以直观看到样式文件的组成，确认是否存在未使用的组件样式冗余。
• 进一步压缩可以自定义Sass变量：通过覆盖Vuetify内置的Sass变量，关闭你不需要的全局功能样式（比如默认的reset样式、内置动效、未用到的主题色变体等），还可以再缩减3~10KB左右的体积。

内容的提问来源于stack exchange，提问作者Sebastian Jung