配置 vite 实现 css 代码分割与异步加载可提升网站性能和用户体验。1. 确保使用模块化 css，通过 import styles from './style.module.css' 引入样式以启用代码分割；2. 利用动态 import() 异步加载非关键 css，如用户交互后才显示的组件样式；3. 在 vite.config.js 中设置 build.csscodesplit: true 显式开启代码分割，并可通过 rollupoptions 自定义输出文件名；4. 配置 postcss 插件如 autoprefixer 和 cssnano 优化和压缩 css；5. 对于首屏关键 css 可内联或优先加载，非首屏组件按需加载，路由级 css 按当前路由加载；6. 解决闪烁问题可通过提取 critical css、使用 preload 预加载、合理缓存等策略；7. 结合其他优化手段如图片优化、代码压缩、cdn 加速、http/2 等综合提升首屏渲染速度。
简单来说，配置 Vite 实现 CSS 代码分割与异步加载，是为了让你的网站更快，用户体验更好。通过只加载当前页面需要的 CSS，避免不必要的资源浪费，从而优化首屏渲染速度。
解决方案
Vite 默认就支持 CSS 代码分割，但要实现更精细的控制和异步加载，需要一些额外的配置。
-
确保使用模块化的 CSS: Vite 基于 ES Modules，所以确保你的 CSS 文件（或者 CSS-in-JS）是以模块化的方式引入的。这意味着你需要使用
import styles from './style.module.css'这样的语法。如果你直接在 HTML 中引入全局 CSS 文件，Vite 无法进行代码分割。立即学习“前端免费学习笔记（深入）”；
-
利用动态
import(): 对于某些不重要的 CSS，可以使用动态import()来异步加载。例如，某个组件在用户交互后才显示，那么它的 CSS 可以延迟加载。
// 假设某个组件是动态加载的 async function loadComponent() { await import('./Component.vue'); // Vue 组件，包含 CSS } // 在用户交互后调用 button.addEventListener('click', loadComponent); -
vite.config.js配置: 在vite.config.js文件中，可以进行更细粒度的配置。虽然 Vite 默认处理 CSS 分割，但你可以通过build.cssCodeSplit选项来显式地控制它。 默认情况下，build.cssCodeSplit是true。 如果设置为false，所有 CSS 将会被打包成一个单独的文件。
蓝湖代码转vue2.0+element-ui下载将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], build: { cssCodeSplit: true, // 显式开启 CSS 代码分割 rollupOptions: { output: { assetFileNames: 'assets/[name]-[hash][extname]', // 可选：自定义 CSS 文件名 }, }, }, }) -
PostCSS 配置: 利用 PostCSS 可以进一步优化 CSS。例如，使用
autoprefixer自动添加浏览器前缀，使用cssnano压缩 CSS 代码。 Vite 已经内置了 PostCSS，你只需要在postcss.config.js文件中进行配置。// postcss.config.js module.exports = { plugins: [ require('autoprefixer'), require('cssnano')({ preset: 'default', }), ], }; -
代码示例 (Vue + Vite):
// Component.vue <template> <div :class="$style.container"> <h1>Hello from Component</h1> </div> </template> <script> export default { name: 'Component', } </script> <style module> .container { background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; } </style>在这个例子中，
style module告诉 Vite 将这个组件的 CSS 视为一个模块。Vite 会自动生成唯一的 class 名称，并将其注入到组件中。
如何确定哪些 CSS 应该异步加载？
这取决于你的应用结构和用户行为。一个好的策略是：
- 首屏关键 CSS: 将首屏渲染所需的最小 CSS 直接内联到 HTML 中，或者打包成一个小的 CSS 文件，优先加载。
-
按需加载: 对于非首屏组件或用户交互后才显示的组件，使用动态
import()异步加载它们的 CSS。 - 路由级别的 CSS: 如果你的应用是单页应用 (SPA)，可以根据当前路由加载相应的 CSS。
如何避免 CSS 代码分割带来的闪烁问题？
CSS 代码分割可能会导致页面在加载时出现样式闪烁 (FOUC)。为了解决这个问题，可以采用以下策略：
-
Critical CSS: 提取首屏渲染所需的关键 CSS，并将其内联到 HTML 中。 可以使用工具如
critical或penthouse自动提取关键 CSS。 -
预加载 (Preload): 使用
<link rel="preload">预加载异步 CSS 文件。 这可以告诉浏览器尽早下载这些文件，减少加载延迟。 - 缓存: 确保你的 CSS 文件设置了合适的缓存策略，以便浏览器可以缓存这些文件，避免重复下载。
除了 CSS 代码分割，还有哪些优化首屏渲染的方法？
CSS 代码分割只是优化首屏渲染的一个方面。还有很多其他方法可以提高性能：
- 图片优化: 压缩图片大小，使用合适的图片格式 (WebP)，懒加载图片。
- 代码压缩: 压缩 JavaScript 和 CSS 代码，减少文件大小。
- 服务端渲染 (SSR): 使用服务端渲染可以更快地显示首屏内容，提高用户体验。
- CDN 加速: 使用 CDN 可以将你的静态资源分发到全球各地的服务器，加快访问速度。
- Tree Shaking: 移除未使用的 JavaScript 代码，减少文件大小。
- HTTP/2: 使用 HTTP/2 协议可以并行加载多个资源，提高加载速度。
总的来说，优化首屏渲染是一个复杂的过程，需要综合考虑各种因素。CSS 代码分割是其中的一个重要环节，但不能解决所有问题。需要结合其他优化策略，才能达到最佳效果。
