優化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文件：
<link href="/global.css" rel="stylesheet">
通過以上步驟，你的公共CSS文件將被單獨提取，避免重復引入，從而顯著減小最終打包體積，提升項目性能。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
