美文网首页js css html
Vite从入门到精通(一)开篇介绍

Vite从入门到精通(一)开篇介绍

作者: 程序员三千_ | 来源:发表于2023-04-05 17:27 被阅读0次

    一、Vite简介

    Vite作为新一代的前端构建工具,拥有以下几个特点:

    • 开发时效率极高
    • 开箱即用,功能完善
    • 社区丰富,兼容rollup
    • 开发时超高速的热重载,速度稳定
    • 预设应用和类库打包模式,减少项目配置内容
    • 与前端框架(Vue、React、Angular)无关


      image.png
    总结:就是一个字就是快,原先用webpack构建的项目可能需要1-2分钟的构建时间,而vite只需要2-3秒,开发时每次修改代码,页面基本都是实时更新。这和vite依赖于esbuild息息相关。

    二、专题目标

    • 掌握Vite的使用
      1、 前端框架的集成
      2、CSS、图片、Wasm等的第三方资源的加载
      3、TS、JSX不同语法集成
      4、glob import
      5、 预编译文件
      6、后端nodejs项目的集成
    • Vite插件开发和实战
      1、rolluo、esbuiild的学习
      2、Vite插件API详解
      3、学习官方插件用例
    • Vite的源码解析,理解Vite的原理
      1、为什么Vite的性能如此快
      2、Vite的HMR如何实现
      3、服务端渲染原理

    三、对前端构建工具构建流程的认知

    我们知道,随着前端应用越来越复杂,现在前端开发已经进入了前端框架时代(Vue、React、Angular),
    现在的前端项目不仅仅只是几个页面几个JS那么简单的情况了,可能会有成百上千个js文件,那么构建工具是怎么把成百上千的js打包build成一个js文件的呢?所以构建是我们学习前端逃不开的话题,我们不仅仅要会使用一个构建工具,还要熟悉它的原理。

    相关文章

      网友评论

        本文标题:Vite从入门到精通(一)开篇介绍

        本文链接:https://www.haomeiwen.com/subject/muueddtx.html