vite简介

Vite

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。

什么是构件工具

1. typescript:如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码
2. Vue:安装vue-complier，将我们写的jsx文件或者.vue文件转换为render函数
3. less/sass/postcss/component-style:我们又需要安装less-loader，sass-loader等一系列编译工具
4. 语法降级:babel—>将es的新语法转换旧版浏览器可以接受的语法
5. 稍微改第一点点东西，非常麻烦

构件工具能帮我们做什么

1. 代码转换：将源代码（如 TypeScript、SCSS 等）转换为浏览器或服务器可以直接执行的 JavaScript、CSS 或 HTML。
2. 打包：将项目中的多个文件（模块）合并为一个或多个较小的文件（bundle），以减少客户端请求的次数，从而优化加载速度。
3. 依赖管理：自动处理项目中的第三方库或依赖项，确保它们被正确加载和处理。
4. 优化：对代码进行压缩、去除不必要的注释、移除未使用的代码（tree shaking），以减少文件大小，提高性能。
5. 热模块替换（HMR）：在开发过程中，不需要刷新整个页面，只更新修改的部分，提升开发效率。

Vite 的优势

Vite直观感受----> 快 非常快！
在Vite出来之前，传统的打包工具如Webpack是先解析依赖、打包构建再启动开发服务器，Dev Server 必须等待所有模块构建完成，当我们修改了 bundle模块中的一个子模块， 整个 bundle 文件都会重新打包然后输出。项目应用越大，启动时间越长。

而Vite利用浏览器对ESM的支持，当 import 模块时，浏览器就会下载被导入的模块。先启动开发服务器，当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。灰色部分是暂时没有用到的路由，所有这部分不会参与构建过程。随着项目里的应用越来越多，增加route，也不会影响其构建速度。

WebPack —>兼容ESM和CommonJS模块

    import Vue from 'Vue' 
    const lodash = require('lodash')

Vite —> 默认支持ESM(浏览器环境)

Vite 打包/热更新过程

Vite配置

部分配置

vite完整配置
官网配置地址