构建工具vite详解

---

前言

Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。

一、vite和webpack区别

Webpack 和 Vite 都是现代前端开发中广泛使用的构建工具，但它们在设计理念、实现方式以及性能表现上存在一些显著的区别。

1.启动速度：

• Webpack：在启动项目时，Webpack 需要分析项目所有依赖关系，然后打包成一个或多个文件，这可能导致启动时间较长，尤其是对于大型项目。

• Vite：Vite 利用了浏览器对 ES module 的原生支持，在开发环境下不会对整个项目进行打包，而是按需编译，这使得 Vite 的启动速度通常比 Webpack 快得多

2.构建方式：

• Webpack：Webpack 是基于 Node.js 运行的，它在单线程中执行打包任务，对于大型项目，构建速度可能会受到限制。

• Vite：Vite 在开发环境下使用 esbuild 进行预构建，生产环境下使用 Rollup 进行打包，esbuild 是用 Go 语言编写的，可以充分利用多核 CPU 的优势，从而加快构建速度

3.热更新（HMR）：

• Webpack：Webpack 的热更新机制会在文件变更时重新打包整个项目，这在大型项目中可能不够高效。
• Vite：Vite 实现了一种更高效的热更新机制，当文件变更时，Vite 只对变更的模块进行重新编译和替换，从而提供更快的反馈

4.生产环境打包

• Webpack：Webpack 生产环境下的打包是其核心功能之一，提供了丰富的优化选项，如代码分割、压缩等。

• Vite：Vite 在生产环境下使用 Rollup 进行打包，Rollup 生成的文件通常更小，但 Vite 的插件 API 与使用 esbuild 作为打包器不兼容，因此目前使用 Rollup

5.配置复杂性：

• Webpack：Webpack 提供了高度可配置的接口，可以满足各种复杂的构建需求，但这也意味着配置可能会变得复杂，特别是对于新手。

• Vite：Vite 设计为更易于配置和使用，内置了许多常用的功能，减少了配置的复杂性，使得开发者可以更快地开始项目开发

二、使用步骤

1.安装Vite CLI工具

npm init vite@latest

2.进入创建的项目文件夹

cd <project-name>

3.安装依赖

npm install

4.启动开发服务器

npm run dev

三、vite.config基本配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'//按需自动加载API插件
import Components from "unplugin-vue-components/vite"
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({ imports: ["vue", "vue-router"],}),
    Components()
  ],
  // 配置开发服务器
  server: {
    port: 3000, // 监听的端口，默认 3000
    host: '0.0.0.0',// 监听的主机名，设置为 0.0.0.0 允许外部访问
    https: false,
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  resolve: {
    //别名配置
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']//引入文件的时候，可以忽略掉以下文件后缀
  },
  // CSS 相关配置
  css: {
    devSourcemap: true, // 开发中能够快速找到某样式对应的样式文件
     //预处理器配置项
     preprocessorOptions:{
      less:{
        javascriptEnabled: true,// 是否开启 JavaScript 支持
        math: "always" //支持直接使用表达式 width: 100px - 20px;得到值为width:80px;
      }
    }
  },
})