【金秋打卡】第一天 Vite2.0

第一模块：课程名称：Vite2.0课程 ；章节：1-1~3-2；讲师名称：Tomas

第二模块：

Vite的概念及设计思想

Vite是一种新型前端构建工具，能够显著提升前端开发性能。前端的构建工具还有：webpack，rollup，parcel，gulp。Vite全新的插件构架，可以和Vue3的完美结合。

Vite由两部分组成：

（1）一个开发服务，服务于开发环境，ESM+HMR

（2）一套构建指令，服务于生产环境，用Yollup打包

Vite将模块区分为依赖和源码两类，提升开发服务启动时间。依赖就是：在开发时不会变动的纯JavaScript，Vite会使用esbuild预构建。

Vite以原型ESM方式提供源码，让浏览器接管打包工作。

优势：

Vite主要对应的场景是开发模式，跳过打包按需加载，因此热更新的速度非常快；

可以避免该一行代码等半天的问题；

浏览器解析imports，利用type='module'功能，然后拦截浏览器发出的ES imports请求并做相应处理；

热更新，按需编译

他们存在哪些问题：

（1）缓慢的服务启动；

（2）缓慢的更新；

第三模块：

// 搭建第 Vite 项目
npm create vite@latest
yarn create vite
pnpm create vite
create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。

npx degit user/project my-project
cd my-project

npm install
npm run dev

// 在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：
{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

第四模块：