网站推广的宣传途径,wordpress kalium,dnspod网站备案不关站,推荐设计网站vite分享ppt#xff0c;感兴趣的可以下载#xff1a;
Vite分享、原理介绍ppt 什么是vite系列目录#xff1a;
#xff08;一#xff09;什么是Vite——vite介绍与使用-CSDN博客
#xff08;二#xff09;什么是Vite——Vite 和 Webpack 区别#xff0… vite分享ppt感兴趣的可以下载
Vite分享、原理介绍ppt 什么是vite系列目录
一什么是Vite——vite介绍与使用-CSDN博客
二什么是Vite——Vite 和 Webpack 区别冷启动-CSDN博客
三什么是Vite——Vite 主体流程(运行npm run dev后发生了什么)-CSDN博客
四什么是Vite——冷启动时vite做了什么源码、middlewares-CSDN博客
五什么是Vite——冷启动时vite做了什么依赖、预构建-CSDN博客
六什么是Vite——热更新时vite、webpack做了什么-CSDN博客
七什么是Vite——vite优劣势、命令-CSDN博客 为什么生产环境仍需打包
尽管原生 ESM 现在得到了广泛支持但由于嵌套导入会导致额外的网络往返在生产环境中发布未打包的 ESM 仍然效率低下即使使用 HTTP/2。为了在生产环境中获得最佳的加载性能最好还是将代码进行 tree-shaking、懒加载和 chunk 分割以获得更好的缓存。
要确保开发服务器和生产环境构建之间的最优输出和行为一致并不容易。所以 Vite 附带了一套 构建优化 的 构建命令开箱即用。
为何不用 ESBuild 打包
Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容。尽管 esbuild 速度更快但 Vite 采用了 Rollup 灵活的插件 API 和基础建设这对 Vite 在生态中的成功起到了重要作用。目前来看 Rollup 提供了更好的性能与灵活性方面的权衡。
Webpack 和 Rollup 区别
Rollup 是一个 JavaScript 模块打包工具可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。这一特性在未来将随处可用但 Rollup 让你现在就可以想用就用。
Rollup 是基于 ESM 的 JavaScript 打包工具。相比于其他打包工具如 Webpack 他总是能打出更小、更快的包。因为 Rollup 基于 ESM 模块比 Webpack 和 Browserify 使用的 CommonJS模块机制更高效。
Rollup的亮点在于同一个地方一次性加载。能针对源码进行 Tree Shaking(去除那些已被定义但没被使用的代码)以及 Scope Hoisting 以减小输出文件大小提升运行性能。
Rollup分为 build构建阶段和 output generate输出生成阶段。主要过程如下
获取入口文件的内容包装成 module生成抽象语法树
对入口文件抽象语法树进行依赖解析
生成最终代码
写入目标文件
这里想对Rollp进行更深入的学习可以看看 rollup.js 中文文档 | rollup.js中文网
Rollup插件机制 Rollup 的打包过程中会定义一套完整的构建生命周期从开始打包到产物输出中途会经历一些标志性的阶段并且在不同阶段会自动执行对应的插件钩子函数(Hook)。
Vite 的插件机制是基于 Rollup 来设计的。Vite 模拟了 Rollup 的插件机制设计了一个 PluginContainer 对象来调度各个插件。
PluginContainer 的 实现 基于借鉴于 WMR 中的rollup-plugin-container.js主要分为 2 个部分:
1、实现 Rollup 插件钩子的调度2、实现插件钩子内部的 Context 上下文对象
PluginContainer的定义了一系列执行plugin的方法。如buildStart、resolveId、load、transform。
经验法则对于应用使用 webpack对于类库使用 Rollup。
如果你的项目特别是类库只有JavaScript而没有其他的静态资源文件使用Webpack就有点大才小用了。因为Webpack 打包的文件的体积略大运行略慢可读性略低。这时候Rollup也不失为一个好选择。如果您的代码库是基于 ES2015 模块的而且希望你写的代码能够被其他人直接使用你需要的打包工具可能是 Rollup 。
如果你需要代码拆分(Code Splitting)或者你有很多静态资源需要处理再或者你构建的项目需要引入很多CommonJS模块的依赖那么 webpack 是个很不错的选择。 小结
webpack 是一个全能选手啥都能干只是有点复杂对新手不太友好。
Rollup 是后起之秀打包更简洁。
vite 把 rollup 变成了“开袋即食”便于新手入门。
create-vue 基本取代了 vue-cli除非你想创建 vue2 的项目。
所以想创建一个 vue3 的项目首选 create-vue非常方便快捷建立的项目也可以统一风格。 Vite 优势
1. vite 开发服务器启动速度比 webpack 快快速的冷启动
webpack 会先打包然后启动开发服务器请求服务器时直接给予打包结果如果项目规模庞大打包时间必然很长。
由于现代浏览器本身就支持ES Module会自动向依赖的Module发出请求。vite充分利用这一点将开发环境下的模块文件就作为浏览器要执行的文件而不是像webpack那样进行打包合并。所以Vite只启动一台静态页面的服务器不会打包全部项目文件代码服务器根据客户端的请求加载不同的模块处理实现按需加载。而 vite 在启动开发服务器时不需要打包也就意味着不需要分析模块的依赖、不需要编译因此启动速度非常快。当浏览器请求某个模块时再根据需要对模块内容进行编译。这种按需动态编译的方式极大的缩减了编译时间项目越复杂、模块越多vite的优势越明显。
2. vite 热更新比 webpack 快快速的热更新
在 HMR 方面当改动了一个模块后vite仅需让浏览器重新请求该模块即可不像webpack那样需要把该模块的相关依赖模块全部编译一次效率更高。
3. vite 使用esbuild(Go 编写) 预构建依赖比 webpack 的 nodejs快 10-100 倍。 4.-unbundle 机制的核心:
模块之间的依赖关系的解析由浏览器实现文件的转换由 dev server 的 middlewares 实现并做缓存不对源文件做合并捆绑操作 Vite 劣势
1. 打包到生产环境时vite使用传统的 rollup也可以自己手动安装webpack来进行打包所以vite的优势是体现在开发阶段
2. 项目的开发浏览器要支持 ES Module而且不能识别 CommonJS 语法
3.一些第三方 sdk 没有产出 ems 格式的的代码这个需要自己去做一些兼容
4.由于 unbundle 机制首屏期间、懒加载方面需要额外做以下工作:和 Webpack 对比Vite 把需要在 dev server 启动过程中完成的工作转移到了 dev server 响应浏览器请求的过程中不可避免的导致首屏性能下降。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来。
不对源文件做合并捆绑操作导致大量的 http 请求dev server 运行期间对源文件做 resolve、load、transform、parse 操作预构建、二次预构建操作也会阻塞首屏请求直到预构建完成为止。 命令行界面
开发服务器
vite #
在当前目录下启动 Vite 开发服务器。
使用
vite [root]
选项 选项 --host [host] 指定主机名称 ( string ) --port 指定端口 ( number ) --https 使用 TLS HTTP/2 ( boolean ) --open [path] 启动时打开浏览器 ( boolean | string ) --cors 启用 CORS ( boolean ) --strictPort 如果指定的端口已在使用中则退出 ( boolean ) --force 强制优化器忽略缓存并重新构建 ( boolean ) -c, --config 使用指定的配置文件 ( string ) --base 公共基础路径默认为/ ( string ) -l, --logLevel Info | warn | error | silent ( string ) --clearScreen 允许或禁用打印日志时清除屏幕 ( boolean ) -d, --debug [feat] 显示调试日志 ( string | boolean ) -f, --filter 过滤调试日志 ( string ) -m, --mode 设置环境模式 ( string ) -h, --help 显示可用的 CLI 选项 -v, --version 显示版本号
构建
vite build #
构建生产版本。
使用
vite build [root]
选项 选项 --target 编译目标默认为 modules ( string ) --outDir 输出目录默认为 dist ( string ) --assetsDir 在输出目录下放置资源的目录默认为 assets ( string ) --assetsInlineLimit 静态资源内联为 base64 编码的阈值以字节为单位默认为 4096 ( number ) --ssr [entry] 为服务端渲染配置指定入口文件 ( string ) --sourcemap [output] 构建后输出 source map 文件默认为 false ( boolean | inline | hidden ) --minify [minifier] 允许或禁用最小化混淆或指定使用哪种混淆器默认为 esbuild ( boolean | terser | esbuild ) --manifest [name] 构建后生成 manifest.json 文件 ( boolean | string ) --ssrManifest [name] 构建后生成 SSR manifest.json 文件 ( boolean | string ) --force 强制优化器忽略缓存并重新构建实验性( boolean ) --emptyOutDir 若输出目录在根目录外强制清空输出目录 ( boolean ) -w, --watch 在磁盘中模块发生变化时重新构建 ( boolean ) -c, --config 使用指定的配置文件 ( string ) --base 公共基础路径默认为 / ( string ) -l, --logLevel Info | warn | error | silent ( string ) --clearScreen 允许或禁用打印日志时清除屏幕 ( boolean ) -d, --debug [feat] 显示调试日志 ( string | boolean ) -f, --filter 过滤调试日志 ( string ) -m, --mode 设置环境模式 ( string ) -h, --help 显示可用的 CLI 选项
其他
vite optimize #
预构建依赖。
使用
vite optimize [root]
选项 选项 --force 强制优化器忽略缓存并重新构建 ( boolean ) -c, --config 使用指定的配置文件 ( string ) --base 公共基础路径默认为 / ( string ) -l, --logLevel Info | warn | error | silent ( string ) --clearScreen 允许或禁用打印日志时清除屏幕 ( boolean ) -d, --debug [feat] 显示调试日志 ( string | boolean ) -f, --filter 过滤调试日志 ( string ) -m, --mode 设置环境模式 ( string ) -h, --help 显示可用的 CLI 选项 vite preview #
本地预览构建产物。不要将其用作生产服务器因为它不是为此而设计的。
使用
vite preview [root]
选项 选项 --host [host] 指定主机名称 ( string ) --port 指定端口 ( number ) --strictPort 如果指定的端口已在使用中则退出 ( boolean ) --https 使用 TLS HTTP/2 ( boolean ) --open [path] 启动时打开浏览器 ( boolean | string ) --outDir 输出目录默认为 dist )( string ) -c, --config 使用指定的配置文件 ( string ) --base 公共基础路径默认为 / ( string ) -l, --logLevel Info | warn | error | silent ( string ) --clearScreen 允许或禁用打印日志时清除屏幕 ( boolean ) -d, --debug [feat] 显示调试日志 ( string | boolean ) -f, --filter 过滤调试日志 ( string ) -m, --mode 设置环境模式 ( string ) -h, --help 显示可用的 CLI 选项 感兴趣的可以看看下面的文章
参考文章
Vite 官方中文文档 # 链接-Vite 官方中文文档webpack官网 # 链接-webpack官网esbuild官网 # 链接-esbuild官网rollup官网 # 链接-rollup官网vite的基本使用 # 链接-vite的基本使用什么是 Vite # 链接-什么是 Vite漫谈构建工具(四): 为什么有人说 vite 快有人却说 vite 慢 # 链接-漫谈构建工具(四): 为什么有人说 vite 快有人却说 vite 慢一文详解【webpack】打包原理 # 链接-一文详解【webpack】打包原理[万字总结] 一文吃透 Webpack 核心原理 # 链接-[万字总结] 一文吃透 Webpack 核心原理面向未来的前端构建工具-vite # 链接-面向未来的前端构建工具-viteVue3通透教程【二】更高效的构建工具—Vite # 链接-Vue3通透教程【二】更高效的构建工具—Vitevite详解 # 链接-vite详解Vite 完整版详解 # 链接-Vite 完整版详解Vite介绍和原理解析 # 链接-Vite介绍和原理解析【一】尤大神都说Vite香让我来手把手分析Vite原理 # 链接-【一】尤大神都说Vite香让我来手把手分析Vite原理Vue3之——和Vite不得不说的事 # 链接-Vue3之——和Vite不得不说的事Vite基本使用 # 链接-Vite基本使用Vite介绍和原理解析 # 链接-Vite介绍和原理解析Vite 特性和部分源码解析 # 链接-Vite 特性和部分源码解析前端构建工具vite进阶系列(零) -- 全局概况 # 链接-前端构建工具vite进阶系列(零) -- 全局概况系列前端构建工具vite进阶系列(一) -- vite比webpack的优势与开箱即用 # 链接-前端构建工具vite进阶系列(一) -- vite比webpack的优势与开箱即用前端构建工具vite进阶系列(二) -- vite的依赖预构建与配置文件相关处理 # 链接-前端构建工具vite进阶系列(二) -- vite的依赖预构建与配置文件相关处理前端构建工具vite进阶系列(三) -- 静态资源与css模块化的处理 # 链接-前端构建工具vite进阶系列(三) -- 静态资源与css模块化的处理前端构建工具vite进阶系列(四) -- 插件系统让vite变得更强大 # 链接-前端构建工具vite进阶系列(四) -- 插件系统让vite变得更强大前端构建工具vite进阶系列(五) -- vite的热更新(HMR)机制的实践与原理 # 链接-前端构建工具vite进阶系列(五) -- vite的热更新(HMR)机制的实践与原理前端构建工具vite进阶系列(六) -- vite在实际项目中所能带来的性能优化 # 链接-前端构建工具vite进阶系列(六) -- vite在实际项目中所能带来的性能优化前端构建工具vite进阶系列(七) -- vite与ts、框架的结合实践 # 链接-前端构建工具vite进阶系列(七) -- vite与ts、框架的结合实践前端构建工具vite进阶系列(八) -- vite本地服务器、esbuild、rollup以及跨域的处理 # 链接-前端构建工具vite进阶系列(八) -- vite本地服务器、esbuild、rollup以及跨域的处理重学webpack系列(一) -- 前端模块化的演变历史 # 链接-重学webpack系列(一) -- 前端模块化的演变历史Vite和Webpack的核心差异 # 链接-Vite和Webpack的核心差异一文说清 webpack、vite、vue-cli、create-vue 的区别 # 链接-一文说清 webpack、vite、vue-cli、create-vue 的区别create-vue快速生成项目到底是怎么做的 # 链接 -create-vue快速生成项目到底是怎么做的Vue 团队公开快如闪电的全新脚手架工具 create-vue未来将替代 Vue-CLI才300余行代码学它 # 链接-Vue 团队公开快如闪电的全新脚手架工具 create-vue未来将替代 Vue-CLI才300余行代码学它vite 源码解析之 create-vite # 链接-vite 源码解析之 create-vitevite介绍 与其他构建工具做比较分析vite预构建和热更新的原理 # 链接-vite介绍 与其他构建工具做比较分析vite预构建和热更新的原理深入探讨vite是怎么解析.env文件的 # 链接-深入探讨vite是怎么解析.env文件的深度剖析Vite配置文件 # 链接-深度剖析Vite配置文件Vite项目启动都做了什么# 链接-Vite项目启动都做了什么深入理解Vite核心原理 # 链接-深入理解Vite核心原理vite 依赖预构建-依赖扫描 # 链接-vite 依赖预构建-依赖扫描【Vite】1380- 详解 Vite 依赖预构建流程 # 链接-【Vite】1380- 详解 Vite 依赖预构建流程快速理解 Vite 的依赖预构建 # 链接-快速理解 Vite 的依赖预构建五千字深度解读 Vite 的依赖扫描 # 链接 -五千字深度解读 Vite 的依赖扫描五千字剖析 vite 是如何对配置文件进行解析的 # 链接-五千字剖析 vite 是如何对配置文件进行解析的预构建 如何玩转秒级依赖预构建的能力 # 链接-预构建 如何玩转秒级依赖预构建的能力【源码】Vite源码分析是时候弄清楚Vite的原理了 # 链接-【源码】Vite源码分析是时候弄清楚Vite的原理了vite2 常用插件篇四- 进阶插件 # 链接-vite2 常用插件篇四- 进阶插件深入Vite再谈ESM的高阶特性 # 深入Vite再谈ESM的高阶特性Vite介绍及实现原理 # Vite介绍及实现原理前端框架源码解读之Vite # 前端框架源码解读之Vite下一代前端构建工具 - Vite 2.x 源码级分析 # 下一代前端构建工具 - Vite 2.x 源码级分析初识 vite 原理vite 是如何启动项目的 # 初识 vite 原理vite 是如何启动项目的Vite 是如何兼容 Rollup 插件生态的 # Vite 是如何兼容 Rollup 插件生态的前端面试必备 | Vite 篇P1-30 # 前端面试必备 | Vite 篇P1-30一文带你了解vite对浏览器的请求做了什么 # 一文带你了解vite对浏览器的请求做了什么通俗的解释下Vite能用来干嘛是怎么回事 # 通俗的解释下Vite能用来干嘛是怎么回事
