Vite好用的前端构建工具

是什么

Vite是Vue的作者尤雨溪开发的 一种新型前端构建工具。
Vite在大型项目开发模式下，打包速度远高于webpack。

Vite 为什么这么快

1. 快速冷启动

Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载。
而我们所熟知的webpack则是，一开始就将整个项目都打包一遍，再开启dev-server，如果项目规模庞大，时间必然很长。

2. 热模块更新

对于热更新问题，Vite采用立即编译当前修改文件的办法，同时结合vite的缓存机制（http缓存 ==》 Vite内置缓存），加载更新后的文件内容

3. 打包编译速度

Vite使用esbuild预构建依赖，而esbuild是用Go编写的，比JS编写的打包器快很多。

常用配置

vite.config.js 文件

import { defineConfig } from 'vite' // 使用 defineConfig 工具函数获取类型提示：
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({/* ==============================================》 打包配置 《============================================== *//** base： 当使用 yarn build 命令构建应用程序时，base 配置项会影响生成的静态文件的路径，确保在部署时能够正确访问到这些文件。* 如果应用程序部署在域名的 根路径 下，则可以将 base 配置项 省略 或设 为 '/'， 实际开发中这是大多数情况。* 当应用程序部署到不同路径下时，base 配置项非常有用。例如，如果您的应用程序部署在域名的 子路径 下，* 如 https://www.example.com/my-app/，则需要这么配置==> base: '/my-app/'*/base: '/foo/', // 开发或生产环境服务的公共基础路径build: {outDir: 'build', // 打包文件 的 输出目录assetsDir: 'static', // 静态资源 的 存放目录assetsInlineLimit: 4096 // 图片转 base64 编码的阈值},/*  ==============================================》 开发配置 《============================================== */resolve: {alias: {'@': path.resolve(__dirname, './src') // 路径别名},extensions: ['.js', '.ts', '.json'] // 导入时想要省略的扩展名列表，不建议包含 .vue 因为他会影响 IDE 和类型的支持。},server: {/* 将 host 设置为 true 或 0.0.0.0 ，这样服务器就会监听所有地址，包括局域网和公网地址。当手机和电脑处于同一个网络环境下，就可以通过地址进行访问了。 */host: true, /* 反向代理也是经常会用到的一个功能，通常使用它来进行跨域： */proxy: {// 字符串简写写法'/foo': 'http://localhost:4567',// 选项写法"/zlhx": {target: "http://localhost:8008",changeOrigin: true,rewrite: path => path.replace(/^\/zlhx/, "zlhx")}// 正则表达式写法'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, '')},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// Proxying websockets or socket.io'/socket.io': {target: 'ws://localhost:3000',ws: true}}},//  插件plugins: [vue(),viteMockServe()]
})