这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
Vite是一种构建工具,而为什么需要构建工具呢?
- 模块化:ESM、CommonJS、UMD
- 资源编译:高级语法的编译
- 产物质量:代码体积、代码性能
- 开发效率:热更新
Vite基础概要
Vite两大组成部分：
- No-bundle 开发服务，源文件无需打包
- 生产环境基于Rollup的Bundler
Vite核心特征
- 高性能，dev启动速度和热更新速度非常快！
- 简单易用，开发者体验好
先前行业内存在 启动缓慢 与 热更新缓慢 的问题,问题在于bundle带来的性能开销.
现如今浏览器已经原生支持ESM,包括:
- script 标签增加type="module”属性
- 使用ESM模块导入导出语法
而基于原生ESM开发服务的优势也很明显,在打包和编译上都有性能提升. 即:
- 无需打包项目源代码
- 天然的按需加载
- 可以利用文件级的浏览器缓存
Vite开箱即用的功能等价于
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader
- sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
这使得vite构建项目效率大大提升,降本增效.
Vite实战
项目初始化
#提前安装pnpm
npmi-g pnpm
#初始化命令
pnpm create vite
#安装依赖
pnpm instal1
#启动项目
npm run dev
目录结构
启动完成后，打开浏览器访问对应地址即可.
使用Sass/Scss&CSS Modules
安装sass
pnpm i sass -D
组件引入
使用静态资源
除了常见的图片格式，Vite也内置了对于JSON、Worker、WASM资源的加载支持: vite静态资源加载
例如引入svg图片:
自动开启HMR
生产环境Tree Shaking
- 基于ESM的import/export 语句依赖关系，与运行时状态无关
- 在构建阶段将未使用到的代码进行删除
Vite架构解析
依赖预打包
提前将依赖进行打包,可以避免nodemodules过多的文件请求并将CommonJS格式转换为ESM格式.
原理:
- 服务启动前扫描代码中用到的依赖
- 用Esbuild 对依赖代码进行预打包
- 改写import 语句，指定依赖为预构建产物路径
单文件编译
用Esbuild编译TS/JSX,可以使编译速度提升10-100X,但不支持类型检查,不支持语法降级到ES5
代码压缩
代码压缩在生产环境是非常重要也非常耗时的一个阶段, Esbuild作为默认压缩工具，替换传统的Terser、Uglify.js等压缩工具
插件机制
在开发阶段使用了Plugin Container来模拟Rollup插件机制;而在生成阶段直接使用Rollup.
