构建工具vite详解

原创已于 2024-06-13 10:54:36 修改 · 1.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2024-05-22 18:14:45 首次发布

vue.js 专栏收录该内容

4 篇文章

订阅专栏

前言

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;
      }
    }
  },
})