vite

Posted 2023-05-29 kitebear

1. 劣势
2. 优势
   • 打包快
   • 预打包
     • 第三方库预打包

通过浏览器去做打包esmodule?

webpack 迁移到 vite

• magic commit (webpack)
  • rollup

特性

1. 在开发环境中，一个 import 语句代表一个 HTTP 请求，正式Vite的dev server来接收这些请求、进行文件转义以及返回浏览器可以正常运行的代码，从而让项目正常进行

对比
react 官方基于 Webpack 的脚手架create-react-app，从项目初始化到依赖安装所花的时间与 Vite 对比如下:
![[Pasted image 20220623152500.png]]

缺点：

1. 二次预构建页面 reload 的问题

registry.npmmirror.com 淘宝源新地址应该是这个

forever young

Vite开发快速入门

一、Vite简介

Vite (法语意为 “快速的”，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。

1.1 Vite组成

Vite构建工具由两部分组成：

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

总的来说，Vite希望提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性。不过，相比Vue-cli配置来说，Vite构建的项目还是有很多的配置需要开发者自己进行处理。

1.2 浏览器支持

• 开发环境中：Vite需要在支持原生 ES 模块动态导入的浏览器中使用。
• 生产环境中：默认支持的浏览器需要支持 通过脚本标签来引入原生 ES 模块 。可以通过官方插件