制作网站开发用的图片,seo81,机械产品做那几个网站好,wordpress添加微信分享一、什么vite?
vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译#xff0c;加快了开发速度。而在生产环境下#xff0c;它使用Rollup进行打包#xff0c;提供更好的tree-shaking、代码压缩和性能优化…一、什么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介绍 Webpack通过先将整个应用打包再将打包后代码提供给dev server 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、实践较少可能存在好多问题还未暴漏出来
