Vite知识体系|青训营

小猫学习中
70 阅读2分钟

前端构建工具的意义

  • 模块化方案：1.提供模块加载方案2.兼容不同模块规范
  • 语法转译：1.高级语法转译，如Sass、TypeScript 2.资源加载，如图片、字体、worker
  • 产物质量：产物压缩、无用代码删除、
  • 语法降级：开发效率热更新

Vite概览

  • 定位:新一代前端构建工具
  • 核心特征
    • 高性能, dev启动速度和热更新速度非常快!
    • 简单易用，开发者体验好
  • 两大组成部分:
    • No-bundle开发服务，源文件无需打包
    • 生产环境基于Rollup 的Bundler
关键技术：单文件编译

优势:编译速度提升10-100 x

局限性:不支持类型检查，不支持语法降级到ES5

关键技术：代码压缩

Esbuild作为默认压缩工具，替换传统的Terser.Uglify.js 等压缩工具

关键技术：插件机制

开发阶段->模拟 Rollup 插件机制

生产环境->直接使用Rollup

生产环境Tree Shaking

优化原理︰

  1. 基于ESM的import/export语句依赖关系，与运行时状态无关
  2. 在构建阶段将未使用到的代码进行删除
  3. Tree Shaking在 Vite中无需配置，默认开启

Vite进阶路线

依赖 esbuild和rollup.js

推荐学习顺序:

  • 先了解基本使用，动手尝试各项常用配置

  • 然后学习其插件开发。

需要插件机制：

  • 抽离核心逻辑

  • 易于扩展

Vite插件开发流程

  1. 服务启动阶段：config-configResolved-options-configureServer-buildStart

  2. 请求响应阶段：-transformIndexHtml resolveId-load-transfrom

  3. 热更新阶段：handleHotUpdate

  4. 服务关闭阶段：buildEnd-closeBundle

js编译工具（Babel）：

出现的原因:

  • JavaScript语法标准繁多,浏览器支持程度不一
  • 开发者需要用到高级语法

服务端渲染（SSR）

一种常见的渲染模式，用于提升首屏性能和SEO优化：

  • 构建阶段：项目源码-构建流程-客户端产物（运行在浏览器）| -SSR产物（运行在服务端）
  • 代码执行阶段：加载SSR入口-数据预取-组件渲染-HTML拼接

深入了解底层标准：

了解前端工具和标准的变迁，深入学习ESM规范，需要同时了解CJS和ESM的标准，ESM是当前社区发展的方向。

Vite社区生态：

  • Github 40k+ star (可参考webpack 61.3 K, rollup 21.8 k),并且目前还在持续维护
  • 官方提供插件: @vitejs/plugin-vue,提供 Vue 3支持 @vitejs/plugin-vue-jsx,提供 Vue 3 JSX支持@vitejs/plugin-react,提供React支持 @vitejs/plugin-legacy,提供低版本浏览器降级支持
  • 被众多框架内置

总结

通过本课程的学习了解认识了Vite的知识体系，学习了相关知识，理解了Vite在生产中的重要性，同时老师提供了很多学习资料供课后学习和更加深入的了解。

avatar
文章
阅读
粉丝