通过配置 @rollup/plugin-vue 的 isproduction 选项并启用 shimmodulescope，可以确保 vue 单文件组件中的模板和脚本被正确标记为副作用，从而允许 rollup 在构建时安全地移除未使用的导出。结合 vite 或 webpack 等现代打包工具，这种优化能显著减小最终产物体积。
Vue SFC 中 Tree Shaking 失效的原因是什么
Vue 单文件组件（SFC）默认被视为具有副作用，因为模板编译和样式注入会在模块加载时执行。如果不显式告知打包工具该模块是纯导出，Tree Shaking 机制会保守地保留所有导入的组件，即使它们未被使用。这是因为 JavaScript 规范中，任何包含顶层语句执行的模块都被认为有副作用。
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@rollup/plugin-vue';
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// 关键配置：告诉 Rollup 模块作用域是隔离的
isProduction: true,
shimModuleScope: true
}
}
})
]
});
上述配置中，shimModuleScope: true 是关键。它指示 Rollup 插件将 SFC 的脚本部分视为一个独立的模块作用域，从而允许 Rollup 分析其导出项。如果缺少此配置，Rollup 可能会将整个 SFC 视为一个黑盒，导致内部导出的组件无法被外部 Tree Shaking 剔除。
如何验证 Tree Shaking 是否生效
验证 Tree Shaking 是否生效的最直接方法是检查构建后的输出文件。可以使用 rollup-plugin-visualizer 生成可视化报告，或者简单地查看构建产物的大小变化。如果一个大型组件库中的某个子组件未被使用，但在构建后依然出现在 bundle 中，则说明 Tree Shaking 未生效。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
// 仅导入实际使用的组件
import { Button } from './components/ui/button';
createApp(App).use(Button).mount('#app');
在上述代码中，如果 ./components/ui/button 是一个包含多个组件的大型库，且我们只使用了 Button，那么正确的 Tree Shaking 应该只将 Button 相关的代码打入 bundle。如果其他组件也被打包进来，则需要检查打包工具的配置是否正确处理了模块的副作用标记。
当组件存在动态导入时如何处理
对于需要懒加载的组件，通常使用动态 import() 语法。这种情况下，Tree Shaking 的作用范围仅限于动态导入的模块本身。如果动态导入的模块内部没有正确配置副作用标记，那么该模块内的所有导出都将被保留。因此，确保动态导入的模块也遵循相同的副作用标记规则至关重要。
例如，在一个路由配置中：
// router/index.js
const routes = [
{
path: '/about',
component: () => import('./views/About.vue')
}
];
这里 About.vue 会被动态加载。如果 About.vue 内部导入了大量未使用的辅助函数或组件，而这些内容没有被正确标记为可摇树，那么它们也会被打包进最终的 chunk 中。解决这一问题的方法与静态导入相同，即确保 SFC 插件正确配置了 shimModuleScope。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
