基于 Vite5 的项目搭建经验，包括按需加载、热更新优化及 TypeScript 集成，对比传统 Webpack 构建的优势

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 自动导入组件：