前言

最近在维护我的自娱自乐组件库 Pixelium Design 时，遇到了一个神奇的问题。打包后的文件中，出现了两段一样的公共样式代码。

这段公共样式其实是在每个组件的 Vue 模板的 <style> 标签里导入的。按理说，Vite 应该能识别出这是同一份文件并进行去重。

因为最近状态实在不佳，没太多精力深入源码去死磕原理，这里就单纯记录一下这个坑，也给遇到类似情况的自己或他人提个醒。

Github Repo: Pixelium Design

问题现象

在开发组件库时，为了保持样式的一致性和复用性，我抽取了一份公共样式文件假设叫 index.css。然后，在多个不同的组件 .vue 文件中，我都通过 <style> 标签引入了它。

然而，在执行打包命令后，查看 ./dist 下生成的文件时，我发现打包后的 CSS 中 index.css 的内容被重复打包了两次，让包体积增加了。

调试与猜测

在调试过程中，我对比了构建产物和配置。经过一番排查，我产生了一个猜测：

这个问题的原因极有可能是：Vue 的构建机制在处理 <style> 标签时，会将 Vue 导入的样式文件加上写在 <style> 标签上的 lang 属性生成了新的文件标识。这就导致了 Vite 把同一个物理文件的导入识别成了两个不同的模块。

举个例子：

• 组件 A 可能是以 css 的形式引入公共样式。
• 组件 B 可能由于手抖眼花，写成了 lang="less"。

虽然指向磁盘上的同一个文件，但在构建工具眼中，index.css?lang=less 和 index.css?lang=css 被视为两个不同的资源路径，因此分别进行了编译和打包，最终导致了样式的重复。

目前这只是基于现象的推测，具体的解决方案可能需要深入 Vite 的解析流程看看…

不管怎么样，按照这个思路修改后，问题就消失了，逃（