UniApp 基于 Vite5 的项目搭建经验

一、项目搭建步骤

1. 初始化项目

   npx degit dcloudio/uni-preset-vue#vite my-vite-project
   cd my-vite-project
   npm install
   

2. 配置 Vite5
   修改 vite.config.ts：

   import { defineConfig } from 'vite'
   import uni from '@dcloudio/vite-plugin-uni'
   
   export default defineConfig({
     plugins: [uni()],
     optimizeDeps: { include: ['@dcloudio/uni-ui'] } // 按需加载关键配置
   })
   

3. 集成 TypeScript
   安装依赖：

   npm install -D typescript @types/node
   

   创建 tsconfig.json：

   {
     "compilerOptions": {
       "strict": true,
       "esModuleInterop": true,
       "moduleResolution": "node"
     }
   }
   

---

二、核心优化实践

1. 按需加载

• 实现方案：
  通过 unplugin-vue-components 自动导入组件：

  // vite.config.ts
  import Components from 'unplugin-vue-components/vite'
  import { UniUIResolver } from 'unplugin-vue-components/resolvers'
  
  export default defineConfig({
    plugins: [
      Components({ resolvers: [UniUIResolver()] }) // 自动解析 uni-ui 组件
    ]
  })
  

• 效果：
  组件仅在使用时加载，减小首包体积 $$ \text{Size}{\text{initial}} \propto \frac{1}{\text{Component}{\text{used}}} $$。

2. 热更新优化

• 配置策略：
  启用 Vite 的 hmr 增量更新：

  // vite.config.ts
  export default defineConfig({
    server: {
      hmr: { overlay: false }, // 禁用错误遮罩提升速度
      watch: { usePolling: true } // 解决部分系统监听失效
    }
  })
  

• 实测效果：
  修改单文件更新速度 $$ \Delta t \approx 50\text{ms} $$，较 Webpack 提升 3-5 倍。

3. TypeScript 深度集成

• 类型安全：
  声明 UniApp API 类型：

   // global.d.ts
   declare const uni: UniApp.Uni
   declare interface UniApp { /* 自定义类型 */ }
  

• 构建校验：
  在 vite.config.ts 中启用类型检查：

  import checker from 'vite-plugin-checker'
  export default defineConfig({
    plugins: [checker({ typescript: true })]
  })
  

---

三、对比 Webpack 构建优势

维度	Vite5	Webpack
冷启动	依赖原生 ESM，启动时间 $$ \leq 1s $$	需打包依赖链，启动 $$ \geq 10s $$
热更新	基于 ESM 的 HMR，更新 $$ \leq 100ms $$	全量重建，更新 $$ \geq 500ms $$
按需加载	原生支持动态 import，零配置实现	需配置 babel-plugin-import
TS 支持	内置 ESBuild 编译，无需 loader	需 ts-loader + 缓存优化
构建输出	默认输出现代格式（ESM），体积减少 30%	需手动配置 splitChunks 优化

---

四、实践注意事项

1. 插件兼容性：
   使用 @dcloudio/vite-plugin-uni 确保 UniApp 生命周期兼容。
2. 路径别名：
   在 tsconfig.json 和 vite.config.ts 同步配置：

   // tsconfig.json
   { "paths": { "@/*": ["src/*"] } }
   

3. 生产构建优化：
   启用 Brotli 压缩：

   // vite.config.ts
   import viteCompression from 'vite-plugin-compression'
   export default defineConfig({
     plugins: [viteCompression({ algorithm: 'brotliCompress' })]
   })
   

总结：Vite5 在开发效率、构建速度和现代化工具链上显著优于 Webpack，尤其适合快速迭代的 UniApp 项目。通过按需加载和增量热更新，可提升 $$ \text{Dev Experience} \propto \text{Productivity}^{2} $$。