vite对比webpack，有何提升？
前言
然后我们又从webpack5升级到了vite，vite给人的最大的体验就是快，极大缩小编译的时间，今天来讲讲它们的区别。
正文
webpack核心本质上是模块打包，首先把各个模块通过编译打包到bundle里，然后再执行。所以一旦模块过多，编译的时间就会过长，而且修改一个模块，全部模块重新编译，影响开发体验。
而vite采用 依赖预构建，es Module 和 按需编译等方式，速度相比webpack提升非常快。
esbuild
依赖预构建，vite是采用esbuild打包工具，它在启动时把依赖先转换成ES模块，智能导入，依赖项缓存到 node_modules/.vite文件夹，同时浏览器也会缓存。
esbuild采用Go语言开发，可以多线程并发和直接编译成机器码等，它的处理时间比webpack这些js打包器快很多。
vite还使用esbuild来处理ts，jsx等文件的转译，速度也是非常快。
各个打包工具打包10个three.js的时间，如下图：
es Module
同时vite利用浏览器已经支持es Module的特性，vite提供ES模块，浏览器直接加载运行，如果是commonjs模块或者UMD模块，则转换成ES模块再加载，因为浏览器直接加载ES模块，速度比还需要编译成bundle的webpack快得多。
ES module特性目前大部分主流浏览器都支持。
它是通过在script标签加上type="module"即生效，代表当前代码是模块化。
下面来看看es Module的一些用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module">
import { createApp, ref } from '/node_modules/vue/dist/vue.esm-browser.js'
createApp({
setup () {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
</head>
<body>
<div id="app">{{ message }}</div>
</body>
</html>
可以发现，script带上type="module", 可以直接importes模块，然后它挂载时访问div#app，并不会报错。
正常script此时并不能访问div#app，但是type="module"可以让它延迟执行，跟defer效果等同。
tips: defer只在script标签的src属性有值才有效果。
export const name = '答案cp3'
export const gender = 'boy'
<!-- index.html -->
<script type="module">
import { name, gender } from '/info.js'
console.log(name, gender)
</script>
直接运行，会报错，需要使用本地起一个服务，不然会有跨域请求。
起了服务再运行，就能再次打印了。
同时，import不能直接使用包的名称，而是需要提供相对路径。vite是帮我们做了转化成相对路径。
import { createApp } from 'vue' ❌
import { createApp } from '/node_modules/vue/dist/vue.esm-browser.js' ✔
按需编译
vite只在浏览器需要加载模块时才加载，其它没引用到的不会加载。同时，它的热更新只针对编辑的模块，没有编辑的模块不会热更新，从而快速提升开发体验。
补充
目前vite它只在开发环境会使用esbuild和es Module，生产环境还是使用rollup打包。
因为vite的api和esbuild不是很兼容，对css和代码分割也支持不够。同时 es Module在生产环境会有很多额外的网络请求，导致体验不是很好。
但是在开发环境已经是飞一般的体验，绝对是快。
目前vite只支持es Module浏览器，如果需要在低版本浏览器引入，需要安装这个plugin-legacy依赖。
转载自:https://juejin.cn/post/7269956639514902585