Vite ｜青训营Vite概览为什么需要前端构建工具资源多且繁杂，需要打包处理前端代码需要ESM、CommonJ

Vite概览

为什么需要前端构建工具

资源多且繁杂，需要打包处理
前端代码需要ESM、CommonJS进行模块化
高级的语法，如typescript sass需要被编译成javascript css
需要通过压缩，无用代码删除，代码降级等方式减少代码体积、提高代码性能
需要热更新提高开发效率

Vite简介

使用基于原生ESM的开发服务器，大幅提高模块热更新速度
使用Rollup打包代码，可输出用于生产环境的高度优化过的静态资源

Vite的使用方式

创建vite项目
```
npm create vite
```

安装依赖
```
npm install
```

启动项目
```
npm run dev
```

启动完成后，打开浏览器访问对应地址即可

Vite与Webpack

Vite 和 Webpack 都是前端开发中常用的构建工具

构建速度：
- Vite：以开发服务器的形式启动，利用 ES 模块的特性，实现了更快的冷启动和热更新，因此在开发过程中具有出色的构建速度。
- Webpack：相对而言，Webpack 的冷启动时间较长，尤其是在大型项目中，但它通过各种优化策略（如多线程、缓存等）来改善构建性能。
热模块替换：
- Vite：利用 ES 模块的优势，实现了更快速的 HMR，可以在无需完全刷新页面的情况下替换模块。
- Webpack：也支持 HMR，但在某些情况下可能相对较慢。
打包输出：
- Vite：在生产模式下通过 Rollup 进行打包，生成高效且可读性较好的代码。
- Webpack：可以配置多种输出格式，但在某些情况下生成的代码可能较复杂。
配置：
- Vite：采用了零配置或近零配置的理念，通过约定大于配置的方式减少了开发者的配置工作。
- Webpack：需要较为详细的配置文件来定义项目的构建过程，这为灵活性提供了更多的空间，但可能需要更多的配置工作。
生态系统：
- Vite：相对较新，虽然正在快速发展，但其插件和生态系统可能还不如 Webpack 成熟和广泛。
- Webpack：拥有庞大且成熟的生态系统，有大量的插件和社区支持。
项目类型：
- Vite：更适合于现代的、轻量级的前端项目，特别是在需要快速开发原型、小型应用或库时。
- Webpack：适用于各种规模的项目，从小型应用到大型单页应用和复杂的多页应用。

Vite的简单应用

配置路径别名

使用路径别名可以将长路径简化为一个短的别名，从而使导入语句更加清晰、简洁。

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },
});

// tsconfig.json
{
  "compilerOptions": {
    // something...
      
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@pages/*": ["./src/pages/*"],
      "@assets/*": ["./src/assets/*"],
    }
  },
  // something...
}

配置反向代理

在本地测试环境中，前后端往往部署在本地的不同端口上，浏览器会执行同源策略，阻止跨域请求。通过反向代理，可以将所有请求发送到同一个域名下，从而避免浏览器的跨域限制。

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000", //后端部署的地址
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^/api/, ""), //重写路径,替换/api
        secure: false,
      },
    },
  },
});

Vite ｜ 青训营

Vite概览

Vite的使用方式

Vite与Webpack

Vite的简单应用

Vite ｜青训营