• 什么是Vite Vite优势以及竞品对比


    什么是Vite

    Vite是尤随Vue3正式版一并发布的工具,起初是和Vue绑定的,后续发展成了框架无关的一个工具
    Vite其实是构建工具的高阶封装,内部是其他的构建工具,最多的是rollup,rollup一般用于个人项目的三方库

    Vite的目标
    使用简单(底层是rollup,兼容rollup插件,较少配置)
    集成了DevServer,不用额外配置DevServer
    快(开发时体验让人感觉是没有编译过程的,修改之后热更新体验是非常快的)
    便于扩展(rollup的插件基本上在vite可以直接使用)

    Vite生产构建使用rollup, Snowpack默认构建输出是未打包的

    Vite和传统构建工具的区别

    Vite

    • High Level Api
      其他都是low Level Api, 关注太细节了
    • 不包含自己的编译能力,不参与编译,底层是Rollup和ESbuild
    • 完全基于ESM加载方式进行开发

    vs webpack

    webpack 功能更强大,rollup是一个更加专一的工具
    webpack构建产物有许多自身特性,辅助函数;rollup不会,它产出的是符合规范的代码,初衷是为工具类库服务,而不是前端项目
    Vite的目的是工程,Vite更加上层, 刚方便开发项目
    vite在DEV环境使用了EsBuild,启动的时候只做了一些预编译,初次访问只需要编译首页需要加载的内容,相当于只有一条路径,而webpack需要递归遍历所有路径输出bundle

    使用Vite学习成本没有webpack那么高,它从一开始设计就是为了面向项目开发。vite为项目而生,不为构建而生

    vite减少了工作量

    • 内置dev server
    • 不需要配置各类loader,vite直接内置了,提前预设好了
    • 内置了build命令 vite build, vite dev, vite serve

    vs 脚手架 vue-cli,create-react-app

    你要修改后两者,你还是要修改webapck配置
    cra需要eject弹射
    vue-cli需的configWebpack和chainWebpack
    Vite有自身的插件系统,尽量做到了简单

    webpack更全面,rollup更专一,vite更High-level更好用

  • 相关阅读:
    [设计模式] 10 外观模式 facade
    [设计模式] 11 享元模式 Flyweight
    [设计模式] 9 装饰者模式 Decorator
    [设计模式] 8 组合模式 Composite
    float2int
    《ASP.NET》数据绑定——GridView
    Android Studio左边栏Project不见了?
    Linux下的五种I/O模型
    Shell编程入门(第二版)(下)
    Android訪问网络,使用HttpURLConnection还是HttpClient?
  • 原文地址:https://www.cnblogs.com/ltfxy/p/16345232.html
Copyright © 2020-2023  润新知