这是我参与【第四届青训营】笔记创作活动的第20天
Vite知识体系
什么是Vite？
定义:这是新一代的前端构建工具
Vite的组成部分是什么？
1.首先是No-bundle开发服务，它的源文件不需要打包可以直接使用
2.基于Rolluo的Bundler生产环境
Vite知识体系的好处？
首先是它具有高性能，DEV启动速度非常快，其次Vite知识体系简单易用，让开发者具有良好的体验 Vite比Rollup启动时间快了20多倍，比Benchmarks快了十几倍
见下图：
Vite的不足？
首先是bundle带来的性能跟不上去
其次是JavaScript语言的性能存在很大的瓶颈
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>test esm</title>
</head>
<body>
<script type="module">
import{foo} from './foo.js'
console.log(foo)
</script>
<body>
</html>
script标签增加type=“module”属性 使用ESM模块导出语法
ESM
基于ESM开发的优势？
1.无需打包项目源代码
2.天然的按需加载
3.可以利用文件级的浏览器缓存
Esbuild -----
基于Golang开发的前端工具，具备如下能力：
1.打包器 Bundler
2.编译器 Transformer
3.压缩器 Minifier
Esbuild性能极高，在Vite中被深度利用
我们应该如使用Vite？
输入初始化参数，启动后截图 启动完成后，打开浏览器对应地址即可
安装Sass的代码如下图
Vitm的整体架构
如下图：
在这里就出现一个问题：我们为什么要进行预打包？
首先这可以避免node-modules过多的文件请求 其次可以将C摸摸摸JS格式转化为ESM格式 实现的原理：利用了服务器启动千扫描代码中用到的依赖
