【学习打卡】第七天 Vite零基础快速入门

学习课程名称：Vite零基础快速入门
章节名称：Vite 概念和设计思想
讲师姓名：Tomas

课程内容概述：

1. Vite概念介绍
2. esm加载对比
3. Vite和CRA对比

在之前，浏览器中没有模块化的设计，我们需要把所有源代码编译到一个 js 文件中提供给浏览器使用，所以在开发中我们运行启动命令的时候， webpack 需要从入口文件去索引整个项目的文件，编译成一个或多个单独的 js 文件。即使采用了代码拆分，也许要一次生成所有路由下的编译后文件。这就导致了服务启动时间随着项目复杂度而指数级增长。

Vite 所倡导的no-bundle理念的真正含义是利用浏览器原生 ES 模块的支持，实现开发阶段的 Dev Server，进行模块代码的按需加载。浏览器请求对应的 url 的时候，提供对应的文件，一个 import 语句代表一个 HTTP 请求。

这里说的模块代码其实分为两部分：
一部分是源代码，即业务代码，
另一部分是第三方依赖的代码，即node_modules中的代码。
所谓的no-bundle只是对于源代码而言，对于第三方依赖而言，Vite 会进行依赖的预构建。

ES6 Module和CommonJS区别

ES6 Module属于编译时加载，即静态加载，在编译时就能够确定模块的依赖关系，以及输入和输出的变量；CommonJS属于运行时加载，都只有在代码运行时才能确定这些东西。ESM形式的好处是可以做到tree shaking。

ES6 Module可以加载模块的部分内容，CommonJS需要加载模块整个对象，再取到内容。

按照webpack官网的解释，tree shaking通常用于描述移除JavaScript上下文中的未引用代码（dead-code）。它依赖于ESM的静态分析能力，例如import和export。用大白话解释就是，如果是使用模块化开发的话，就可以删除那些引入某个模块中用不到的函数。

为什么叫tree shaking， 我个人觉得这个名次叫的很形象呀。你可以将应用程序想象成一棵树。绿色表示实际用到的源码和 library，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。