如何在Vite中提取公共的CSS文件以优化打包体积？-小浪学习网

如何在Vite中提取公共的CSS文件以优化打包体积？

优化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