新一代构建工具Vite-xyphf

一、什么vite?

vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译,加快了开发速度。而在生产环境下,它使用Rollup进行打包,提供更好的tree-shaking、代码压缩和性能优化;

vite主要解决了现有工具(如webpack、rollup)在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。

vite是Vue团队的官方出品,背靠超级生态,Vue-cli会在下面两个版本中将vite作为预设构建工具;

未来使用vue-cli去构建vue项目的时候你要写的vue.config.js,不再是webpack的配置而是vite的配置;

它主要由两部分组成:

1、一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

2、一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

二、vite能做什么?

、分环境构建

我们在开发的时候通常会分开发环境、测试环境、预发布环境、灰度环境、生产环境等,一般不同环境请求API不一样,而且一般要求开发环境代码不压缩,生产环境代码压缩等,可以根据不同的环境来进行不同的构建。

、模块化开发

支持直接从node_modules里引入代码 + 多种模块化支持

、兼容性处理

利用babel实现语法降级,将高版本的ES语法转换成大多数浏览器都支持的低版本ES语法,将TS语法转换成JS语法,将less、scss等css预处理器转化成css;自动添加如webkit等css头等;

、性能优化

如实现构建速度优化、按需加载、代码压缩、动态导入、CDN加速等等;

、优化开发体验

实现前端mock数据、浏览器热更新、本地开发跨域代理等等。

三、vite和webpack的区别?

webpack 4.x介绍

新一代构建工具Vite-xyphf_第1张图片

Webpack通过先将整个应用打包,再将打包后代码提供给dev server

新一代构建工具Vite-xyphf_第2张图片

Vite直接将源码交给浏览器,实现dev server秒开,浏览器显示页面需要相关模块时,再向dev server发起请求,服务器简单处理后,将该模块返回给浏览器,实现真正意义的按需加载

webpack与vite的区别

Webpack

Vite

基础概念不同

webpack是一个模块打包器,它可以把许多不同类型的模块和资源文件打包为静态资源。它具有高度的可配置性,可以通过插件和loader扩展其功能。

vite由Vue.团队溪开发并维护,是一个基于浏览器原生 ES imports 的开发服务器。它能够提供丰富的功能,如快速冷启动、即时热更新和真正的按需编译等。

编译方式不同

webpack在编译过程中,会将所有模块打包为一个bundle.js文件,然后再运行这个文件。

vite在开发模式下,没有打包的步骤,它利用了浏览器的ES Module Imports特性,只有在真正需要时才编译文件。在生产模式下,vite使用Rollup进行打包,提供更好的tree-shaking,代码压缩和性能优化。

开发效率不同

webpack的热更新是全量更新,即使修改一个小文件,也会重新编译整个应用,这在大型应用中可能会导致编译速度变慢。

vite的热更新是增量更新,只更新修改的文件,所以即使在大型应用中也能保持极快的编译速度。

扩展性不同

webpack有着成熟的插件生态,几乎可以实现任何你想要的功能,扩展性非常强。

vite虽然也支持插件,但相比webpack的生态,还有一些距离。

应用场景不同

webpack由于其丰富的功能和扩展性,适合于大型、复杂的项目。

vite凭借其轻量和速度,更适合于中小型项目和快速原型开发。

优点

相对健全的生态,webpack的loader和plugin已经很成熟

1、vite使用esbuild预构建依赖,esbuild使用go语言编写,并且比以javascript编写的打包器构建依赖快10-100倍。

2、vite采用的是按需动态编译的模式,当浏览器请求需要的模块时,再对模块进行编译,这种处理模式极大的缩短了编译时间,当项目越大,文件越多,vite的开发时优势越明显;

3、vite的热更新比webpack快。vite在HRM方面(HMR是指当你对代码进行修改并保存后,webpack对代码重新打包,并将新的模块发送到浏览器端,浏览器通过替换旧的模块,在不刷新浏览器的前提下,就能够对应用进行更新),当改动了一个模块后,vite仅需让浏览器重新请求该模块即可,不像webpack那样需要把该模块的相关依赖模块全部编译一次,效率更高。

4、由于现代浏览器本身就支持ES Module,会自动向依赖的Module发出请求。vite充分利用了这点,将开发环境下的模块文件,就作为浏览器要执行的文件,而不是像webpack那样进行打包合并。

缺点

热更新效率低下。webpack的热更新需要打包构建,而vite直接响应。

1、生态不及webpack,加载器、插件不够丰富

2、项目的开发浏览器要支持ESmodule, 而且不能识别CommonJS语法

3、实践较少,可能存在好多问题还未暴漏出来

你可能感兴趣的:(前端工具,vite,构建工具)