Vite知识总结
2021-12-03 10:52:34 1 举报AI智能生成
Vite官方文档的总结
作者其他创作
大纲/内容
为什么选择Vite
现实问题
浏览器支持ES模块之前
JS原生机制缺乏模块化方式
打包
工具抓取、处理和链接我们的源码模块到文件中使其可以运行在浏览器
JS代码量增大出现性能瓶颈
几千个模块
启动几分钟
HMR 更新需要数秒
问什么生产环境仍需打包
嵌套导入缓慢
HTTP/2多路复用也不能改善
性能优化
tree-shaking
树摇
懒加载
chunk分割
更好缓存
EsBuild为什么
虽然快
css处理 代码分割 不够成熟
选择rollup
Vite与其他Bundless工具区别
Snowpack
Helloworld
总览
Vite
法语意为 "快速的"，发音 /vit/
新型前端构建工具
开发服务器
基于原生ES丰富的内建功能
支持Vue sfc
支持JSX
热更新模块
构建指令
基于Rollup
静态资源优化
浏览器
开发环境
支持原生ES模块导入
生产环境
支持ES模块浏览器
通过@vitejs/plugin-legacy
支持非ES模块浏览器
Helloworld
js
yarn create vite js
vue
yarn create vite vue --template vue
使用社区模板
degit
现在git资源工具
degit makes copies of git repositories.
功能详解
NPM 依赖解析和预构建
提高页面加载速度
CommonJS / UMD 转换为 ESM 格式
原生不支持的裸模块加载 模块文件没有没有扩展名
基于esbuild
模块热重载
内置
Vue 单文件组件
React Fast Refresh
TypeScript
只转义不做类型检查
基于esbuild
esbuild
不支持类型信息转义
Vue
Vue3.0
Vue2.0
JSX
CSS
静态资源处理
JSON
Glob 导入
Web Assembly
Web Worker
构建优化
动态导入 Polyfill
CSS 代码分割
预加载指令生成
异步 Chunk 加载优化
依赖预构建
静态资源处理
构建生产版本
部署静态站点
环境变量与模式
服务端渲染
后端集成
Vite生态
0 条评论
下一页
