一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
Vite
在我们介绍 Vite 之前，我们先来快速回顾一下 ES Module。
ES Module
- 现代浏览器都支持 ES Module（IE除外）
- 通过下面的方式加载模块 -
<script type="module" src="..."></script> - 支持模块的 script 默认延迟加载
- 类似于 script 标签设置 defer
- 在文档解析完成后，触发DOMContentLoaded 事件前执行
Vite vs Vue-CLI
- Vite 在开发环境下不需要打包就可以直接运行
- Vite 会对浏览器无法加载的文件进行特殊处理，将编译的结果返回给浏览器
- Vue-CLI 开发模式下必须对模块打包才可以进行运行
- 这也导致了一个问题，如果项目特别大的话，会特别的慢（启动）
- Vite 在生产环境下使用 Rollup 打包
- 基于ES Module的方式打包
- Vue-CLI 使用 Webpack打包
Vite的优点
- 快速的冷启动
- 按需编译
- 模块热更新
Vite的使用
Vite有两种创建项目的方式
- 方式一
npm init vite-app <project-name>
cd <project-name>
npm install
复制代码- 方式二 基于模板创建项目
npm init vite-app --template react
npm init vite-app --templatye preact
复制代码基于方式一 进行项目搭建
- 初始化项目
2. 安装依赖
- 安装完毕依赖之后，我们来查看一下项目中的 index.html 文件
注意这里的 srcipt标签 这里是通过module来进行加载模块
看起来似乎没什么问题，我们来运行一下这个项目，来看看
可以看见，我们的页面正常工作，下面我们来查看一下网页的源代码
在main.js中会加载 app.vue 文件，但是浏览器并不能识别到.vue文件，可是项目又可以正常运行，那是怎么工作的呢？
这里我们发现，它截取了 我们请求，获取到其中的.vue文件，并且修改了响应头，以便告诉浏览器这是一个js脚本