优化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插件可以有效解决这个问题。
立即学习“前端免费学习笔记（深入）”；
苏打办公
360旗下的办公工具导航，优质海量工具
21 查看详情 安装插件:
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文件将被单独提取，避免重复引入，从而显著减小最终打包体积，提升项目性能。
以上就是如何在Vite中提取公共的CSS文件以优化打包体积？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/358935.html
微信扫一扫 
支付宝扫一扫 
