如何在Vite中提取公共的CSS文件以優(yōu)化打包體積？

優(yōu)化Vite項(xiàng)目打包體積：提取公共css文件

在Vite項(xiàng)目中，重復(fù)引入公共CSS文件（例如global.scss）會(huì)顯著增加最終打包體積。本文將演示如何使用vite-plugin-css-extract插件高效地提取和優(yōu)化公共CSS。

問(wèn)題：CSS代碼重復(fù)

假設(shè)你的vite.config.JS中配置了如下代碼，用于導(dǎo)入公共scss文件：

css: {   preprocessorOptions: {     scss: {       additionalData: '@import "@/global.scss";',       javascriptEnabled: true     }   } }

此配置導(dǎo)致每個(gè)組件的CSS文件都包含global.scss的內(nèi)容，造成冗余。

解決方法：使用vite-plugin-css-extract

vite-plugin-css-extract插件可以有效解決這個(gè)問(wèn)題。

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

1. 安裝插件:

npm install vite-plugin-css-extract --save-dev

2. 配置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       }     }   } });

3. 提取公共CSS:

插件會(huì)自動(dòng)將公共CSS（例如global.scss）提取到單獨(dú)的CSS文件中，通常命名為global.css。

4. 在html中引入:

最后，在你的HTML文件中引入生成的global.css文件：

<link href="/global.css" rel="stylesheet">

通過(guò)以上步驟，你的公共CSS文件將被單獨(dú)提取，避免重復(fù)引入，從而顯著減小最終打包體積，提升項(xiàng)目性能。