Vite是一种新型的前端构建工具；
构建工具：
- 模块化方案
- 提供模块加载方案
- 兼容不同的模块规范
- 语法转义
- 高级语法转义：sass、TS；
- 资源加载：img、字体等等；
- 产物质量
产物压缩、无用代码删除、语法降级 - 开发效率
热更新（HMR）
1 webpack
基于包的开发服务器
webpack是js应用程序的静态模块打包器（module bundler）;
会递归地构建一个依赖关系图，然后将所有这些模块打包成一个或者多个包；
module.exports = {
entry: {
main: './src/main.js',
home: './src/home/index.js',
about: './src/about/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(_dirname, 'dist')
},
}
(function (modules){
function __weboack_require__(moduleId){}
...
return __weboack_require__(略 = "./src/main.js")
})({
'./main.js':(function(module, export, __weboack_require__){}),
'./home.js':(function(module, export, __weboack_require__){}),
'./about.js':(function(module, export, __weboack_require__){}),
})
webpack打包完输出的bundle.js文件是一个匿名自执行函数;
参数是Object对象，key是项目中每个模块的js文件名称，value是一个function；
模块中的代码都会被解析后放在这个function内；
运行流程是一个 【串行】的过程 ，从启动到结束，依次执行；
要读取项目中 所有模块，然后打包，然后才运行；
重点在：要读取项目中 所有模块
2 vite
基于本地esm的开发服务；
先启动服务，根据浏览器请求，到了entry 入口，只编译请求的路由和模块；没有请求的路由和模块都不编译；所以速度快；
ES modules(ESM)是 JS 官方的标准化模块系统。
ESM 标准 规范了如何把文件解析为模块记录，如何实例化和如何运行模块。
ESM 使用 实时绑定 的方式；导出和导入的模块 都指向 相同的内存地址（即值引用）。
所以，导出模块内导出的值发生变化后，导入模块中的值也实时改变了；
<h1> 浏览器 ESmodules (ESM) 演示 </h1>
<script type="module">
import { name, showName } from './data.js'
import demo from './demo.json' assert{type:'json'}
console.log('==>name', name)
showName();
console.log('===>demo', demo);
</script>
script 里面加上type="module"，这样浏览器才会把相关代码当做 ES6 的 module 来对待；
vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖；不需要编译，因此启动速度非常快；
当浏览器请求某个模块时，再根据需要对模块内容进行编译；（动态编译）
当需要打包到生产环境时，vite 使用传入的rollup （亮点：针对ES6源码进行 Tree Shaking，在打包时静态分析 ES6模块代码中的 import，排除未实际使用的代码，减小构建包的体积）进行打包；所以说 vite 的主要优势在开发阶段；
2.1 为什么说vite是一种新型的前端构建工具，而不称它为打包工具呢？
构架工具：构建过程包括：预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等等；
打包工具：更注重打包这一过程；主要包括依赖管理和版本管理；
3 JS 标准
- commonJS规范（同步）：适合于服务端；例如：node；
- Amd（异步）、cmd规范，适合浏览器环境；
- Umd：结合了Amd、commonJs，可以同时运行在服务器和浏览器；
- ESM（ES Module）
工具
- require.js：可以分析amd 模块依赖关系、合并压缩js、优化css；
- less/sass插件：可以将less/sass代码转化为 css代码；
- babel：可以将 es6转化为es5；
- typescript：将ts编译为js；
- jslint/eslint：代码检查；
4 ES Modules
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系；
ESM 规范指令只有三个：import、export、export default；
import { star, exists } from 'fs';
从fs模块加载两个方法，其他方法不加载；这种加载方式称为 “编译时加载” 或者 静态加载；
commonJS模块运行时加载，效率比 Common JS模块加载方式高；
ES6模块自动采用严格模式，不需要在模块头部加入 “use strict”；
- 重命名 as import { n1 as nn1 } from ‘./xxx.js’;
- import 命令有提升效果，会提升至整个模块的头部；
主要原因：import 命令是编译阶段执行的，在代码运行之前； - 模块的整体加载 import * as Obj from ‘/test.js’;
- 编译时加载、运行时加载；
- 编译时加载：不加载整个模块，只加载某个输出值；
- 运行时加载：遇到模块加载命令import，会生成一个只读引用；等到脚本真正执行时，根据只读引用，到加载的模块里面取值；ESM是动态引用，不会缓存值；
