优化Vite项目打包体积：提取公共CSS文件
在Vite项目中，重复引入公共CSS文件（例如global.scss）会显著增加最终打包体积。本文将演示如何使用vite-plugin-css-extract插件高效地提取和优化公共CSS。
问题：CSS代码重复
假设你的vite.config.js中配置了如下代码，用于导入公共SCSS文件：
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/global.scss";',
javascriptEnabled: true
}
}
}
此配置导致每个组件的CSS文件都包含global.scss的内容，造成冗余。
解决方法：使用vite-plugin-css-extract
vite-plugin-css-extract插件可以有效解决这个问题。
立即学习“前端免费学习笔记（深入）”；
- 安装插件:
npm install vite-plugin-css-extract --save-dev
- 配置Vite:
在vite.config.js中添加插件：
import { defineConfig } from 'vite';
import cssExtract from 'vite-plugin-css-extract';
export default defineConfig({
plugins: [cssExtract()],
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/global.scss";',
javascriptEnabled: true
}
}
}
});
- 提取公共CSS:
插件会自动将公共CSS（例如global.scss）提取到单独的CSS文件中，通常命名为global.css。
- 在HTML中引入:
最后，在你的HTML文件中引入生成的global.css文件：
通过以上步骤，你的公共CSS文件将被单独提取，避免重复引入，从而显著减小最终打包体积，提升项目性能。
