webpack/vue-cli中如何实现css的treeshaking

在Vue CLI项目中，CSS的TreeShaking是通过PurgeCSS插件自动实现的，该插件在构建过程中分析源代码并移除未使用的CSS。

为了使TreeShaking生效，你需要遵循以下步骤：

1. 确保你使用的是Vue CLI 3.x或更高版本，因为旧版本可能不支持自动TreeShaking。
2. 在你的Vue组件中，不要直接在<style>标签中导入全局CSS文件，而是应该使用模块系统导入你需要的CSS。

例如，如果你有一个Component.vue文件，并且想要TreeShaking其CSS，你可以这样做：

<template>
  <!-- Your template here -->
</template>
 
<script>
export default {
  // Your component here
}
</script>
 
<style module>
.some-class {
  /* Some CSS that is only used by this component */
}
</style>

在<style module>中编写CSS，只有当该组件被引用时，相关CSS才会被包含在最终的打包文件中。

如果你需要导入第三方的模块化CSS（例如，一个npm包），你应该使用ES6的import语法来导入它：

// 在你的组件中
import 'some-npm-package/dist/some-npm-package.css';
 
// 或者，如果包支持ES Module导入
import 'some-npm-package/dist/some-npm-package.module.css';

通过这种方式，PurgeCSS插件可以分析这些导入并确定哪些CSS是未使用的，然后在构建过程中将其移除。

请注意，TreeShaking可能不会在所有情况下都起作用，特别是当全局CSS或第三方库被直接引用时。为了确保最佳效果，尽可能使用模块化的CSS并遵循Vue CLI推荐的做法。