• 更高效的构建工具-vite


    前言

    首先我们要认识什么时构建工具?

    企业级项目都具备什么功能呢?

    • Typescript:如果遇到ts文件,我们需要使用tsc将typescript代码转化为js代码;
    • React/Vue:如果使用前端框架需要安装react-complier / vue-complier,将我们的jsx文件/vue文件转换为render函数
    • less/sass/postcss/component-style:如果使用这些css预处理器,需要安装less-loadersass-loader等一系列编译工具;
    • 语法降级:Babel -->可能有部分浏览器还不支持新语法,所有我们还需将es的新语法转换到旧版本浏览器可以识别的语法格式;
    • 体积优化:uglifyjs / Terser --> 可以将我们的代码压缩成体积更小性能更高的文件;

    如果我们稍微需要修改一些东西,都需要这么多东西的构建,非常麻烦~

    现在有一个工具可以把tsc,vue-complier,less-loader,babel,terser等等都集成到一起,当代码更改时会自动将这些全部启动运行一遍。非常之轻松,这就是构建工具!!!

    除了这些功能,一个构建工具还集成了:

    • 模块化开发支持:可以直接从node_modules引入代码;
    • 提高项目性能:压缩文件,代码分割;
    • 优化开发体验:
      • 会自动监听文件的变化,自动帮你调用所需要的处理工具并且进行重新打包( 整个过程叫做热更新(HRM)
      • 开发服务器:帮助我们解决跨域问题;为什么叫开发服务器呢? 因为服务器与服务器之间时不存在跨域问题的,所以本质上就是创建一个服务器帮助你去访问你访问不到的服务器;

    Vite是什么

    vite开发环境依赖esbuild进行预构建,生产环境则依赖rollup进行打包,并且充分利用了现代浏览器的特性,它是站在众多巨人肩膀上的一个产物,一个非常棒的前端项目的构建工具。vue-cli中已经将vite作为预设构建工具,如果我们使用vue-cli进行创建项目时,vue.config.js不再将时webpack的配置而是vite的配置。

    Vite和webpack的比较

    vite官方文档
    当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

    他们两种构建工具的侧重点不同,webpack更多的是关注兼容性,vite是更侧重于浏览器端的开发体验~

    1. 运行原理

    • webpack
      在这里插入图片描述

    当我们使用webpack启动项目时,webpack会根据我们配置文件(webpack.config.js) 中的入口文件(entry),分析出项目项目所有依赖关系,然后打包成一个文件(bundle.js),交给浏览器去加载渲染。项目越大,运行时间越长。

    • vite
      在这里插入图片描述
      使用vite运行项目时,首先会用esbuild进行预构建,将所有模块转换为es module,不需要对我们整个项目进行编译打包,而是在浏览器需要加载某个模块时,拦截浏览器发出的请求,根据请求进行按需编译,然后返回给浏览器。

    2. 使用成本

    • webpack
      如果我们使用webpack自己去搭建项目脚手架时,需要配置比较多的东西, 比如:跨域、代码压缩、代码分割、css预处理器的代码转换、样式兼容性、vue/react代码解析、图片压缩、代码热更新、es降级、ts转换等等。

    • vite
      vite对我们常用功能都做了内置,比如:css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR等等,我们可以很轻松的通过配置项去配置。降低了我们的学习成本、增加了开发体验。

    Vite的初体验

    vite需要node.js版本18+,20+,请注意升级你的node版本

    //使用 NPM:
    $ npm create vite@latest
    
    //使用 Yarn:
    $ yarn create vite
    
    //使用 PNPM:
    $ pnpm create vite
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    这里需要输入项目名称,选择需要构建的框架以及需要使用的语言。

    在这里插入图片描述
    最后运行这上图的三条命令,构建速度也是非常的快~

    在这里插入图片描述
    创建成功的效果图如下图:

    在这里插入图片描述



    到这里vite的初步讲解就算结束了,创作不易,感谢支持!❤️❤️❤️

  • 相关阅读:
    网络安全(黑客)自学
    直流充电桩测试仪的作用
    【Leetcode-链表强训】
    温故知新----线程之Runnable与Callable接口的本质区别
    充电桩软硬件,赚钱新招数!-慧哥充电桩开源系统
    ELK架构Logstash的相关插件:grok、multiline、mutate、date的详细介绍
    Unity之PUN实现多人联机射击游戏的优化(Section 2)
    Coggle 30 Days of ML【打卡】广告-信息流跨域ctr预估
    嵌入式 单片机面试 通信协议常见问题答案 串口通信 IIC通信 SPI通信 协议解析讲解 RS232 RS485 协议 IIC总线
    分组背包问题
  • 原文地址:https://blog.csdn.net/m0_73593563/article/details/136229466