极客笔记CSS 使用 Vite 将 JS 和 CSS 打包成单个文件
在本文中，我们将介绍如何使用 Vite 将 JavaScript（JS）和层叠样式表（CSS）打包成单个文件。Vite 是一个现代化的前端构建工具，它具有快速的冷启动时间和即时热更新的能力，使开发者能够更高效地构建现代化的 Web 应用程序。
阅读更多：CSS 教程
什么是 Vite
Vite 是一个基于 ES Modules 的构建工具，它使用原生模块系统（ESM）来运行代码，而无需进行传统的打包操作。Vite 利用浏览器的原生加载机制，在开发环境下只需按需请求模块，以达到更快的启动时间。
Vite 配置文件
在开始之前，我们需要创建一个 Vite 配置文件 vite.config.js。该文件应该位于项目的根目录下，并包含以下内容：
import { defineConfig } from 'vite';
export default defineConfig({
build: {
cssCodeSplit: false,
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
});
在这个配置文件中，我们禁用了 CSS 的代码拆分，这样 CSS 将会被打包到一个单独的文件中。
打包 CSS 和 JS
在编写代码时，我们可以将 CSS 和 JS 文件分开开发，然后使用 Vite 将它们打包成单个文件。
在 HTML 文件中，我们需要引入打包后的 CSS 和 JS 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/dist/style.css">
</head>
<body>
<script src="/dist/main.js"></script>
</body>
</html>
现在，我们来创建一个简单的示例，将两个 CSS 文件和一个 JS 文件打包成单个文件。
首先，我们创建两个 CSS 文件 style1.css 和 style2.css，并添加一些样式：
/* style1.css */
body {
background-color: #f2f2f2;
}
/* style2.css */
h1 {
color: #ff0000;
}
接下来，我们创建一个 JS 文件 main.js，并在其中引入两个 CSS 文件：
/* main.js */
import './style1.css';
import './style2.css';
console.log('Hello Vite!');
现在，我们可以运行 Vite 来打包这些文件。在命令行中运行以下命令：
vite build
打包完成后，你会在 dist 文件夹下找到打包后的文件：style.css 和 main.js。
将这两个文件复制到你的项目中，并在 HTML 文件中引入它们即可：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/dist/style.css">
</head>
<body>
<script src="/dist/main.js"></script>
</body>
</html>
现在，当你运行项目时，你会发现 CSS 和 JS 文件已经打包成单个文件了。
总结
Vite 是一个强大的前端构建工具，它能够将 JS 和 CSS 打包成单个文件。通过按需请求模块，Vite 提供了快速的冷启动时间和即时热更新的能力，极大地提高了开发效率。使用 Vite 打包 CSS 和 JS 文件是一种优化前端性能的常用方式，帮助我们减少资源请求和提高页面加载速度。希望本文对你理解如何使用 Vite 打包 CSS 和 JS 文件有所帮助。