vite学习|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第14天

一、本堂课重点内容：

二、详细知识点介绍：

• 前端为什么要构建工具

  前端由很多资源构成，当下浏览器标准与前端开发速度不匹配

• 前端构建工具的意义

  模块化方案

  1.提供模块加载方案
  
  2.兼容不同模块规范
  

  语法转译

  1.高级语法转译，如Sass、TypeScript
  2.
  3.资源加载，如图片、字体、worker
  

  产物质量

  产物压缩、无用代码删除、语法降级
  

  开发效率

  热更新
  

• Vite

  • vite定义

    新一代前端构建工具

  • 组成部分

    开发阶段 —— No - bundle开发服务（Node.Js 的 dev server），源文件无需打包（与传统工具最大不同）

    生产环境 —— 基于Rollup的Bundler，将所有业务代码打包，针对Rollup进行了定制和优化

  • 核心特征

    1）高性能，dev 启动速度和热更新速度非常快，给予瞬间反馈

    2）简单易用，开发者体验好

  • 当下问题

    缓慢的启动->项目编译等待成本高

    缓慢的热更新->修改代码后不能实时更新（及时反馈）

    • 缘由

      bundle带来的性能开销

      JavaScript语言的性能瓶颈

  • vite两大趋势

    基于浏览器对原生ESM的支持

    两大要素: 
    
    1）script标签增加 type="module" 属性
    
    2）使用ESM模块导入导出语法
    
    优势：
    
    无需打包项目源代码，去除bundle开销
    
    按需加载
    
    可以利用文件级的浏览器缓存
    

    基于esbuild的编译性能

    是基于Golang开发的前端工具，具备如下能力:

    1.打包器Bundler —— 对应
    
    2.编译器Transformer ——对应 bable
    
    3.压缩器Minifier —— 对应 tensor
    

    性能极高，达到传统工具的二三十倍，在Vite中被深度使用

    集成了很多webpack中的能力

• 插件机制

  • 优点

    抽离核心逻辑

    把server端能力抽出，构建相关能力封装为插件，达到解耦效果，构建与dev server 逻辑分离开来便于维护
    

    易于拓展

    社区生态为vite提供各部各功能插件
    

    插件总结

三、引用参考：

• 文章中插件总结参考引用于前端入门 - 工具篇 - Vite 进阶路线 课程