构建工具的出现和模块化实践的痛点
多种代码，多个包，多种模块规范并存时代的开发
浏览器本身只认识 html，css 和 js
vue，react 这些库的代码它是不认识的
其实这些库自己有编译包，比如把 vue 转化为 render 函数
ts 它也不认识
css 也有各种 loader
js 兼容老浏览器要 babel 降级
模块文件过多导致请求频繁
- 一个 require 或者一个 import 其实就是一次请求，模块过多会网络压力太大
不同模块系统兼容性没保证
- CJS,ESM 的相互兼容并不是理所当然的\
- webpack 其实也是自己实现了一个_webpack_require 来统一处理 CJS 和 ESM 的\
此外还需要整体的体积压缩
- 如果看过 webpack 打包后代码的话，就会发现其中基本不考虑任何人类可读的格式，所有空格都被视为多余而被压缩工具一并清除，最后所有代码紧密地挤在一起，就是为了尽可能省点空间压榨点性能
手动打包的开发体验差
- 在单纯的开发环境下，上面这些东西全都要额外手动操作，稍有改动就全部重来\
- 还需要注意，现在应用的规模整体上越来越大，这个“重来一遍”的时间越来越久\
根据上面的痛点，构建工具的功能应该是...
模块化支持
- 因为浏览器也不认识 node-modules
- webpack 允许你混用 require 和 import
- 用 ast 解析之后全部转为 webpack 自己的 require 的一个立即执行函数
- vite 目前主要支持 esmodule
代替你自动处理兼容性 做一些代码优化，尤其像代码分隔和压缩文件 优化写代码的体验，主要是热更新和开发服务器处理跨域 只要一次配好配置文件，后续只需简单调用命令