vite入门

Vite入门

为什么需要工程化？

太多的资源文件，高级语法，优化代码体积，提升代码效率，热更新

提供模块加载方案，兼容不同模块规范

高级语法转译，如sass，ts。资源加载，图片，字体，worker

产物压缩，无用代码剔除，对不支持高级语法的浏览器等平台进行语法降级

热更新

特点

No-bundle开发服务，源文件无需打包

生产环境基于Rollup的Bundler

高性能，dev启动速度和热更新速度非常快

相比于webpack配置简单易用，开发体验好

传统构建工具缺点：

编译慢，热更新慢

瓶颈；bundle带来的性能开销，js语言本身的性能瓶颈

vite：

基于原生js的ESM，浏览器无需打包源代码，祛除了bundle的性能开销，天然的按需加载，可以利用文件级的浏览器缓存

深度使用esbuild

npm i pnpm -g
pnpm create vite // 根据项目进行条件选择
pnpm i // 下载依赖
pnpm run dev
pnpm i  sass -D
其他配置
tree shaking在vite中默认开启

为什么要进行预打包？

避免node_modules过多文件请求

将commonjs转换为ESM格式

实现原理：

服务启动前检查项目依赖

用esbuild对依赖代码进行预打包

改写import语句，指定依赖为预构建产物路径

改写前
import React from 'react'
改写后
import React from './node_modules/.vite/react.js'
关键技术：单文件编译使用esbuild完成
局限性：不支持类型检查，不支持语法降级到es5，最低es6，因此在生产环境需要调用tsc
关键技术：代码压缩
关键技术：插件机制
开发阶段 => 模拟rollup插件机制
生产阶段 => 直接使用rollup
注：不是所有rollup插件都能兼容vite

vite后续学习路线：

esbuild，rollup：可以去看官方文档，编写的很好

先尝试基础的配置

再进阶插件开发

为什么需要插件机制

vite钩子：

插件的配置和使用demo

代码拆包

……

babel

js语法标准繁多，浏览器支持程度不同，将高级语法降级

原理：将代码转换为高级语法抽象语法树，再转换为低级语法抽象树，再通过babel的generator转换为代码

语法安全降级解决方案：

vite上层解决方案：@vitejs/plugin-legacy

底层原理：借助babel进行语法降级，提前注入Polyfill实现，如core-js，regeneraator-runtime

服务端渲染SSR

未完待续……