瀑布流项目 - 项目骨架搭建

vite 选择比较 webpack 优劣

Vite 优势

• 开发服务器极快：基于 ESM，按需编译，冷启动毫秒级，不随项目规模增长而变慢
• HMR 极速：只更新变更模块，不刷新页面，状态保持良好，大型项目优势显著
• 开箱即用：原生支持 TypeScript、JSX、CSS 预处理器、CSS Modules，无需额外 loader 配置
• 构建基于 Rollup：生产打包借助 Rollup 的成熟生态和 Tree-shaking，输出更高效
• 插件生态：兼容 Rollup 插件，同时有 Vite 专属插件体系
• 配置简洁：相比 webpack 复杂配置大幅精简

Vite 劣势

• 生态成熟度：部分老牌 webpack loader/plugin 尚无 Vite 等价替代
• 浏览器兼容：开发模式依赖 ESM，不支持 ES Module 的旧浏览器需生产构建降级
• Code Splitting 细粒度控制：Rollup 的代码分割能力不如 webpack 灵活

Webpack 优势

• 生态极其成熟：几乎所有场景都有现成的 loader 和 plugin
• 配置灵活：几乎所有构建行为都可定制，适合复杂工程需求
• 兼容性好：对 CommonJS、AMD、UMD 等模块规范全面兼容
• Code Splitting 强大：splitChunks、动态导入等机制成熟且可控

Webpack 劣势

• 开发服务器慢：冷启动和 HMR 随项目规模线性增长，大型项目体验差
• 配置复杂：loader、plugin、resolve 等大量配置项，学习曲线陡峭
• HMR 更新慢：修改后需重新打包模块图，大项目 HMR 延迟明显

结论：新项目优先选择 Vite；遗留项目或对构建有极端定制需求的场景可继续使用 webpack。

Vite 处理 CJS 的方式

Vite 在开发模式下基于原生 ESM，遇到 CJS 依赖时：

• 预构建（Pre-bundling）：启动时用 esbuild 将 CJS 依赖转换为 ESM 并缓存到 node_modules/.vite/deps
  • 处理 module.exports / require() → export default / import
  • 转换为 ESM 后浏览器可直接加载
  • 缓存命中后二次启动极快
• CJS 导出处理：esbuild 将 CJS 整体导出转为 export default 形式，同时生成 __esModule 标记保证互操作性
• 手动优化：可通过 optimizeDeps.include 强制预构建某些深层依赖；optimizeDeps.exclude 排除无需预构建的依赖
• 局限性：
  • 动态 require()（运行时变量拼接路径）无法静态转换，需用 await import() 替代
  • 部分 CJS 包使用了 __dirname、__filename、process.env.NODE_ENV 等 Node.js 全局，Vite 在浏览器环境需 polyfill 或替换

// vite.config.ts — 预构建配置
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'dayjs'],
    exclude: ['some-large-cjs-lib'],
  },
})

Vite 8 新特性

基于 Vite 8 (2026 年发布) 的重要变化

特性	说明
基于 Rolldown 构建	生产构建从 Rollup 迁移到自研 Rolldown（Rust 编写），构建速度提升 5-10 倍
CSS 支持增强	原生 CSS @import 支持、lightningcss 作为可选 CSS 处理器（更快）
环境 API (Environment API)	正式稳定，支持多环境构建（client / ssr / worker），每个环境独立配置
模块转换优化	插件系统升级，transform 钩子支持按环境区分
HMR 改进	WebSocket 连接优化，新增 vite.hot.send() 自定义事件 API
依赖预构建升级	基于 Rolldown 的预构建更快，更少冷启动延迟
对 Node.js ESM 的强制要求	Vite 8 要求 Node.js 18+，且推荐 ESM 模式运行
脚手架更新	create-vite 模板优化，新增更多框架和语言支持

为什么选择 Tailwind

• 原子化 CSS：不复存在语义化类名的命名困扰，类名即样式
• 开发效率高：HTML 中直接组合类名完成样式，无需上下文切换
• 一致的 Design System：内置 spacing、color、typography 等 Design Token，设计一致性更好
• 摇树优化：生产构建自动移除未使用的 CSS，产物体积极小
• 响应式内建：sm: md: lg: 等断点前缀，响应式无需写 media query

在 Vite 中使用 Tailwind

npm install -D tailwindcss @tailwindcss/vite

vite.config.ts 配置：

import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [tailwindcss()],
})

入口 CSS 引入：

@import 'tailwindcss';

配合项目目录结构

src/
  components/   # 通用组件
  composables/  # Vue 组合式函数
  layouts/      # 布局组件
  pages/        # 页面
  router/       # 路由配置
  stores/       # Pinia 状态
  types/        # TypeScript 类型
  utils/        # 工具函数

CSS 层叠方案

使用 Tailwind 的 @layer 自定义样式：

@import 'tailwindcss';
@layer base {
  /* 全局基础样式 */
}
@layer components {
  /* 组件级样式，只在必要时使用 */
}
@layer utilities {
  /* 自定义工具类 */
}

优先使用 Tailwind 内置类，@layer components 仅在需要复用复杂组合时使用。

vueuse

usewindow

alias 配置

vue-router

axios

server.proxy target changeOrigin

env 配置

相关笔记

• 物料库与前端设计（组件库方案的后续方向）