【结论】方向都对,但 manualChunks 那条有个细节会反咬一口:把 element-plus 收进 vendor chunk,并不能保证它的样式也进主包;而且它和 importStyle: 'sass' 混用会导致样式重复引入两遍,gzip 后反而多出三五十 KB。
展开说:
manualChunks 的语义陷阱。 写成 'element-plus': ['element-plus'] 在 Rollup 4 里是“element-plus 及其依赖全塞进这个 chunk”,但它管不到 CSS 的归属。如果你入口保留 import 'element-plus/dist/index.css',同时 Components resolver 还在按 importStyle: 'css' 补 es/components/*/style/css,同一套样式就分了两条路径进入,样式顺序是确定了,体积却没有优化。要么把 resolver 的 importStyle 设成 false,只留全量 CSS;要么彻底走 sass,两者留一即可。
sass 路线的实操提醒。 注入用 @use "element-plus/theme-chalk/src/index.scss" as *;,additionalData 会拼在每个 scss 文件最前面。如果业务文件里已经有 @charset 或自己的 @use,位置就会冲突报错;sass 1.80+ 对 element-plus 老版本会持续提示弃用警告,需要配 silenceDeprecations: ['import', 'legacy-js-api']。另外,element-plus 这种体量走 sass 编译,dev 冷启动会明显变慢,建议只在真要做主题定制时采用。
size-limit 补一条。 用 @size-limit/file,开 gzip 和 brotli。只对 dist/assets/*.js 设限会漏掉汇总,建议同时配一条 dist/assets/**/*.{js,css} 的总量预算,再加几条单 chunk 预算,chunk 名带 hash,靠 glob 匹配即可。
【补一句坑】微前端那条再补一个更隐蔽的:module federation shared singleton 下,基座和子应用 element-plus 版本不一致(比如 2.3 / 2.8),ElMessage 的 z-index 和 class 前缀会对不上,现象是“弹窗出来但被压在最底层”,很容易被当成样式没加载去查,实际是版本错配。