为什么需要构建工具？

• 模块化，常用规范：ESM、CommonJS、UMD
• 资源编译，前端代码和浏览器的兼容性问题，高级语法的编译，如TS、LESS、SASS
• 产物质量，代码体积、代码性能
• 开发效率，热更新

Vite

前端构建工具

• 两大组成部分：
  1.No-bundle 开发服务，源文件无需打包
  2.生产环境基于Rollup的Bandle

• 核心特征
  1.高性能，dev启动速度和热更新速度非常快
  2.简单易用，开发者体验好
  

• Vite在未进行配置前就具备的功能等价于：

1. webpack
   
2. webpack-dev-server
   
3. css-loader
   解析css文件里面的css代码,解释 @import 和 url() ，会 import/require() 后再解析(resolve)它们
   
4. style-loader
   将css-loader解析后的内容挂载到html页面当中，通过style标签插入到html页面中-内联方式
   
5. less-loader： 将less编译成css
   
6. sass-loader： 将sass编译成css
   
7. postcss-loader
   
8. file-loader
   
9. MiniCssExtractPlugin
   
10. HTMLWebpackPlugin
    
11. ……

tips：
什么是No-Bundle(无包构建)? 这是一个与 基于模块化打包的构建方案 相对的概念。

目前主流的构建工具，例如 Webpack、Rollup 等都是基于一个或多个入口点模块，通过依赖分析将有依赖关系的模块打包到一起，最后形成少数几个产物代码包，因此这些工具也被称为打包工具。只不过，这些工具的构建过程除了打包外，还包括了模块编译和代码优化等，因此称为打包式构建工具或许更恰当。

而无包构建是指这样一类构建方式：在构建时只需处理模块的编译而无须打包，把模块间的依赖关系完全交给浏览器来处理。浏览器会加载入口模块，分析依赖后，再通过网络请求加载被依赖的模块。通过这样的方式简化构建时的处理过程，提升构建效率。

这种通过浏览器原生的模块进行解析的方式又称为 Native-ESM（Native ES Module）

ESM

支持浏览器原生ESM的两大要素：

1. script标签增加type="module"属性
   
2. 使用ESM模块导入导出语法，export/import
   

基于原生ESM的开发服务优势：

• 无需打包项目源代码
• 天然的按需加载
• 可以利用文件级的浏览器缓存

Esbuild

基于Golang开发的前端工具，在Vite中被深度使用，具备以下性能： 1.打包器Bundle 2.编译器Transformer 3.压缩器Minifier

Esbuild性能极高，看下面这张对比图就可知道：

参考资料：
Vite官方中文文档：
cn.vitejs.dev/guide/featu…
前端工程化精讲第十六课 无包构建：盘点那些 No-bundle 的构建方案：
blog.csdn.net/fegus/artic…
css-loader、style-loader、sass-loader作用：
blog.csdn.net/CamilleZJ/a…