这是我参与「第五届青训营 」伴学笔记创作活动的第10天
打包目的-与webpack相同
- 模块化
- 编译
- 压缩
- 开发效率——热更新，sourceMap
vite
两部分
- No-bundle开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
优势
- 高性能——启动速度快
- 简单易用
原理
利用浏览器支持es模块的方式，
无需打包源代码——一个文件就是一个请求
天然的按需加载
利用文件级的浏览器缓存
项目展示
- css module实现样式隔离，vue通过设置scoped
- 静态资源通过impiort导入
- 热更新后，组件状态保留(变量值)
- 生产环境Treeshaking 原理
- 基于esm的语句依赖
- 构建阶段将未使用的代码删除
特点
- 响应迅速
- 开箱即用
vite结构
文件预打包
单文件编译
使用esbuild编译 问题
- 不支持类型检查
- 不支持语法降级到es5
代码压缩
esbuild作为默认压缩工具
插件技术
vite双引擎
- esbuild
- rollup
之后去了解一下
插件优势
抽离核心逻辑——解耦 易于扩展
代码分割
编译工具babel
ssr渲染
会渲染出一份ssr文件，在服务端渲染
有很多文档需要课后查看，看完后再继续追加笔记
vite ssr文档
vite 搭建ssr工程
