上海自助建站软件,谷歌seo课程,淘宝做网站退款,seo推广绩效考核指标是什么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博客 Vite 和 Webpack 区别 Webpack是近年来使用量最大同时社区最完善的前端打包构建工具新出的5.x版本对构建细节进行了优化在部分场景下打包速度提升明显。Webpack在启动时会先构建项目模块的依赖图如果在项目中的某个地方改动了代码Webpack则会对相关的依赖重新打包随着项目的增大其打包速度也会下降。
Vite相比于Webpack而言没有打包的过程而是直接启动了一个开发服务器devServer。Vite劫持浏览器的HTTP请求在后端进行相应的处理将项目中使用的文件通过简单的分解与整合然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。
Snowpack 首次提出利用浏览器原生ESM能力的打包工具其理念就是减少或避免整个bundle的打包。默认在 dev 和 production 环境都使用 unbundle 的方式来部署应用。但是它的构建时却是交给用户自己选择整体的打包体验显得有点支离破碎。
而 Vite 直接整合了 Rollup为用户提供了完善、开箱即用的解决方案并且由于这些集成也方便扩展更多的高级功能。
两者较大的区别是在需要bundle打包的时候Vite 使用 Rollup 内置配置而 Snowpack 通过其他插件将其委托给 Parcel/webpack。 什么是 Webpack
webpack是能把我们的开发文件打包成一个静态模块的工具,它将所有的模块打包成一个函数,并且会自动处理各种js模块之间的依赖关系,使用webpack打包项目,文件中必存在一个打包后的发布文件夹 dist ,和一个开发文件夹 src 。当 webpack 处理应用程序时它会根据 命令行参数中 或 配置文件中 定义的模块列表开始处理。 从 入口 开始webpack 会递归的构建一个 依赖关系图这个依赖图包含着应用程序中所需的每个模块然后将所有模块打包为少量的 bundle 通常只有一个可由浏览器加载。
webpack核心思想
Webpack 最核心的功能Webpack 核心原理
At its core, webpack is a static module bundler for modern JavaScript applications.
也就是将各种类型的资源包括图片、css、js等转译、组合、拼接、生成 JS 格式的 bundler 文件。官网首页 的动画很形象地表达了这一点 这个过程核心完成了 内容转换 资源合并 两种功能实现上包含以下三个阶段
初始化阶段 初始化参数从配置文件、 配置对象、Shell 参数中读取与默认配置结合得出最终的参数创建编译器对象用上一步得到的参数创建 Compiler 对象初始化编译环境包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等开始编译执行 compiler 对象的 run 方法确定入口根据配置中的 entry 找出所有的入口文件调用 compilition.addEntry 将入口文件转换为 dependence 对象构建阶段 编译模块(make)根据 entry 对应的 dependence 创建 module 对象调用 loader 将模块转译为标准 JS 内容调用 JS 解释器将内容转换为 AST 对象从中找出该模块依赖的模块再 递归 本步骤直到所有入口依赖的文件都经过了本步骤的处理完成模块编译上一步递归处理所有能触达到的模块后得到了每个模块被翻译后的内容以及它们之间的 依赖关系图生成阶段 输出资源(seal)根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk再把每个 Chunk 转换成一个单独的文件加入到输出列表这步是可以修改输出内容的最后机会写入文件系统(emitAssets)在确定好输出内容后根据配置确定输出的路径和文件名把文件内容写入到文件系统
技术名词介绍
Entry编译入口webpack 编译的起点Compiler编译管理器webpack 启动后会创建 compiler 对象该对象一直存活知道结束退出Compilation单次编辑过程的管理器比如 watch true 时运行过程中只有一个 compiler 但每次文件变更触发重新编译时都会创建一个新的 compilation 对象Dependence依赖对象webpack 基于该类型记录模块间依赖关系Modulewebpack 内部所有资源都会以“module”对象形式存在所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的Chunk编译完成准备输出时webpack 会将 module 按特定的规则组织成一个一个的 chunk这些 chunk 某种程度上跟最终输出一一对应Loader资源内容转换器其实就是实现从内容 A 转换 B 的转换器Pluginwebpack构建过程中会在特定的时机广播对应的事件插件监听这些事件在特定时间点介入编译过程 Webpack 知识图谱分享 Webpack 知识图谱 和 Webpack 5 知识体系 冷启动时webpack做了什么#
在 Vite出来之前传统的打包工具如 Webpack 在服务器启动之前需要从入口文件完整解析构建整个应用先解析依赖、打包构建再启动开发服务器Dev Server 必须等待所有模块构建完成当我们修改了 bundle 模块中的一个子模块 整个 bundle 文件都会重新打包然后输出。项目应用越大启动时间越长。因此有大量的时间都花在了依赖生成构建编译上。
打包过程如下
通过配置文件找到入口entry从入口文件开始递归识别模块依赖也就是遇到类似于require、import时webpack都会对其分析从而拿到对应的代码依赖对拿到的代码进行分析、转换、编译最后输出浏览器可以识别的代码。整个过程大概如下图来自vite官网 webpack作为代码编译工具有入口、出口、loader、和插件plugin
入口起点(entry point)指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后webpack 会找出有哪些模块和库是入口起点直接和间接依赖的。
output 属性告诉 webpack 在哪里输出它所创建的 bundles以及如何命名这些文件默认值为 ./dist。基本上整个应用程序结构都会被编译到你指定的输出路径的文件夹中。可以通过在配置中指定一个 output 字段来配置这些处理过程。
loader 让 webpack 能够去处理那些非 JavaScript 文件webpack 自身只理解 JavaScript。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块然后你就可以利用 webpack 的打包能力对它们进行处理。
插件 plugin 是 webpack 的支柱功能。Webpack 自身也是构建于在 webpack 配置中用到的相同的插件系统之上。插件目的在于解决 loader 无法实现的其他事。Webpack 提供很多开箱即用的 插件。 冷启动时vite做了什么
Vite利用浏览器对 ESM的支持当 import 模块时浏览器就会下载被导入的模块。先启动开发服务器当代码执行到模块加载时再请求对应模块的文件,本质上实现了动态加载。灰色部分是暂时没有用到的路由所有这部分不会参与构建过程。随着项目里的应用越来越多增加 route也不会影响其构建速度。 vite serve 开启一个用于开发的Web服务器启动时 Web 服务器时不需要编译所有的代码文件启动速度非常快不需要打包直接开启web服务器。
Vite利用现代浏览器支持 ES Modules 的模块化的特性省略了打包对需要编译的组件例如单文件组件Vite采用了另一种模式即时编译请求某个文件的时候才会编译某个文件及时编译的好处按需编译速度会很快。 对比 vue-cli-service-serve Webpack打包所有模块-bundle内存-打开web服务器 提前编译打包到bundle里面文件越多越慢。 vite build 省略了对模块的打包使用即时编译按需编译速度更快。 小结 Webpack Vite 先打包生成bundle再启动开发服务器 先启动开发服务器利用新一代浏览器的ESM能力无需打包直接请求所需模块并实时编译 HMR时需要把改动模块及相关依赖全部编译 HMR时只需让浏览器重新请求该模块同时利用浏览器的缓存源码模块协商缓存依赖模块强缓存来优化请求 内存高效利用 - vite 的特性
去掉打包步骤
打包是开发者利用打包工具将应用各个模块集合在一起形成 bundle以一定规则读取模块的代码以便在不支持模块化的浏览器里使用并且可以减少 http 请求的数量。但其实在本地开发过程中打包反而增加了我们排查问题的难度增加了响应时长Vite 在本地开发命令中去除了打包步骤从而缩短构建时长。
按需加载
为了减少 bundle 大小一般会想要按需加载主要有两种方式
使用动态引入 import() 的方式异步的加载模块被引入模块依然需要提前编译打包使用 tree shaking 等方式尽力的去掉未引用的模块TreeShaking
而 Vite 的方式更为直接它只在某个模块被 import 的时候动态的加载它实现了真正的按需加载减少了加载文件的体积缩短了时长
