Vite
-
Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具
它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现 -
项目依赖
- Vite
- @vue/compiler-sfc
-
ES Module
- 现代浏览器都支持 ES Module (IE 不支持)
- 通过下面的方式加载模块
- 支持模块的 script 默认延迟加载
- 类似于 script 标签设置 defer
- 在文档解析完成后,触发 DOMContentLoaded 事件前执行
-
Vite as Vue-CLI
-
Vite 在开发模式下不需要打包可以直接运行
-
Vue-CLI 开发模式下必须对项目打包才可以运行
-
Vite 在生产环境下使用 Rollup 打包
- 基于 ES Module 的方式打包
-
Vue-CLI 使用 Webpack 打包
-
-
Vite 特点
- 快速冷启动
- 按需编译
- 模块热更新
- 开箱即用
-
Vite 创建项目
$npm init vite-app
$cd
$npm install
$npm run dev -
基础使用
- Vite serve 在服务器端编译处理
- Vite build 采用 Rollup 进行打包
- Vite HMR
- 立即编译当前所修改的文件
- webpack HMR
- 会自动一这个文件为入口重写 build 一次,所有涉及到的依赖也都会被重写加载一遍
-
打包 or 不打包
- 使用 webpack 打包的两个原因:
- 浏览器环境并不支持模块化
- 零散的模块文件会产生大量的 HTTP 请求
- 使用 webpack 打包的两个原因:
-
开箱即用
- TypeScript 内置支持
- less/sass/stylus/postcss 内置支持 (需要单独安装)
- JSX
- Web Assembly
-
Vite 核心功能
- 静态 Web 服务器
- 编译单文件组件
- 拦截浏览器不识别的模块,并处理
- HMR