no-bundle 构建原理浅析

2024-01-28 0 700 百度已收录

为什么需要构建工具?

  • 处理其他类型文件使其能被浏览器正常加载 —— 许多其他类型的文件需要编译处理为 ES6 模块才能被浏览器正常加载(JSX、Vue、TS、CSS、Image 等)。
  • 解决引用路径的问题 —— 许多第三方依赖包在通过第三方 URL 引用时,不仅过程烦琐,而且往往难以进行灵活的版本控制与更新,因此需要构建工具来解决这类问题。
  • 为开发提供辅助工具 —— 对于现实中的项目开发而言,一些便利的辅助开发技术,例如热更新、sourceMap 等还是需要由构建工具来提供。

什么是无包构建

它的构建方式是:

  • 在构建时只需处理模块的编译而无须打包,把模块间的相互依赖关系完全交给浏览器来处理。
  • 浏览器会加载入口模块,分析依赖后,再通过网络请求加载被依赖的模块。

这种通过浏览器原生的模块进行解析的方式又称为 Native-ESM(Native ES Module)。

1
2
3
4
5
6
7
8
9
10
//./src/index.html
...
<!-- 注意: type="module" -->
<script type="module" src="./modules/foo.js"></script>
...
//.src/modules/foo.js
import { bar } from './bar.js'
import { appendHTML } from './common.js'
...
import('https://cdn.jsdelivr.net/npm/lodash-es@4.17.15/slice.js').then((module) => {...})

基于浏览器的 JS 模块加载功能

HTML 中的 Script 引用注意点:

  • 入口模块文件在页面中引用时需要带上 type=”module” 属性。
  • 带有 type=”module” 属性的 script在浏览器中通过 defer 的方式异步执行(异步下载,不阻塞 HTML,顺次执行),即使是行内的 script 代码也遵循这一原则(而普通的行内 script 代码则忽略 defer 属性)。
  • 带有 type=”module” 属性且带有 async 属性的 script,在浏览器中通过 async 的方式异步执行(异步下载,不阻塞 HTML,按该模块和所依赖的模块下载完成的先后顺序执行,无视 DOM 中的加载顺序),即使是行内的 script 代码,也遵循这一原则(而普通的行内 script 代码则忽略 async 属性)。
  • 即使多次加载相同模块,也只会执行一次。

模块内依赖的引用

  • 只能使用 import … from ‘…’ 的 ES6 风格的模块导入方式,或者使用 import(…).then(…) 的 ES6 动态导入方式,不支持其他模块化规范的引用方式(例如 require、define 等)。
  • 导入的模块只支持使用相对路径(’/xxx’, ‘./xxx’, ‘../xxx’)和 URL 方式(’https://xxx‘, ‘http://xxx‘)进行引用,不支持直接使用包名开头的方式(’xxxx’, ‘xxx/xxx’)。
  • 只支持引用MIME Type为 text/javascript 方式的模块,不支持其他类型文件的加载(例如 CSS 等)。

无包构建工具的介绍:

Vite

Vite 是 Vue 框架的作者尤雨溪最新推出的基于 Native-ESM 的 Web 构建工具。

在开发环境下基于 Native-ESM 处理构建过程,只编译不打包,在生产环境下则基于 Rollup 打包。

Vite对导入模块的解析

对 HTML 文件的预处理

启动 Vite 时,会通过 serverPluginHtml.ts 注入 /vite/client 运行时的依赖模块,该模块用于处理热更新,以及提供更新 CSS 的方法 updateStyle。

对外部依赖包的解析

  • resolver.ts 负责找到对应在 node_modules 中的真实依赖包代码(Vite 会在启动服务时对项目 package.json 中的 dependencies 做预处理读取并存入缓存目录 node_modules/.vite_opt_cache 中)。
  • serverPluginModuleRewrite.ts 负责把源码中的 bare modules 加上 /@module/ 前缀。
  • serverPluginModuleResolve.ts 负责解析加上前缀后的模块。

对 Vue文件的解析

对 Vue 文件的解析是通过 serverPluginVue.ts 处理的,分离出 Vue 代码中的 script/template/style 代码片段,并分别转换为 JS 模块,然后将 template/style 模块的 import写到script 模块代码的头部。

对 CSS 文件的解析

对 CSS 文件的解析是通过 serverPluginCSS.ts 处理的,解析过程主要是将 CSS 文件的内容转换为下面的 JS 代码模块,其中的 updateStyle 由注入 HTML 中的 /vite/client 模块提供

1
2
3
4
import { updateStyle } from "/vite/client"
const css = "..."
updateStyle(""..."", css) // id, cssContent
export default css

Vite 中的其他辅助功能

  • 多框架:除了在默认的 Vue 中使用外,还支持在 React 和 Preact 项目中使用。
  • 热更新(HMR) :默认提供的 3 种框架的脚手架模板中都内置了 HMR 功能,同时也提供了 HMR 的 API 供第三方插件或项目代码使用。
  • 自定义配置文件:支持使用自定义配置文件来细化构建配置,配置项功能参考 config.ts。
  • HTTPS 与 HTTP/2:支持使用 –https 启动参数来开启使用 HTTPS 和 HTTP/2 协议的开发服务器。
  • 服务代理:在自定义配置中支持配置代理,将部分请求代理到第三方服务。
  • 模式与环境变量:支持通过 mode 来指定构建模式为 development 或 production。相应模式下自动读取 dotenv 类型的环境变量配置文件(例如 .env.production.local)。
  • 生产环境打包:生产环境使用 Rollup 进行打包,支持传入自定义配置,配置项功能参考 build/index.ts。

Vite 的使用限制

  • 面向支持 ES6 的现代浏览器,在生产环境下,编译目标参数 esBuildTarget 的默认值为 es2019,最低支持版本为 es2015(因为内部会使用 esbuild 处理编译压缩,用来获得最快的构建速度)。
  • 对 Vue 框架的支持目前仅限于最新的 Vue 3 版本,不兼容更低版本。

Snowpack

  • 从整体功能来说和上述 Vite工具提供的功能大致相同。
  • Snowpack 在生产环境下默认使用无包构建而非打包模式。

与 Vite 相同的功能点

两者都支持各种代码转换加载器、热更新、环境变量(需要安装 dotenv 插件)、服务代理、HTTPS 与 HTTP/2 等。

与 Vite 的差异点

  • 相同的功能,实现细节不同: 例如对 Bare Module 的处理,除了转换后前缀名称不同外(Vite 使用 /@module/ 前缀,而 Snowpack 使用 /web_modules/ 前缀)
  • 工具稳定性
  • 插件体系: 除了版本差异外,Snowpack 提供了较完善的插件体系,支持用户和社区发布自定义插件。
  • 打包工具:在生产环境下,Vite 使用 Rollup 作为打包工具,而 Snowpack 则需要引入插件来实现打包功能,官方支持的打包插件有 @snowpack/plugin-webpack 和 @snowpack/plugin-parcel,暂未提供 Rollup 对应的插件。
  • 特殊优化:Vite 中内置了对 Vue 的大量构建优化,因此对 Vue 项目而言,选择 Vite 通常可以获得更好的开发体验。

无包构建 VS 打包构建

无包构建的优点

  • 初次构建启动快: 无包构建流程中,模块依赖分析与编译都是在浏览器渲染页面时异步处理的
  • 按需编译:在浏览器渲染时,根据入口模块分析加载所需模块,编译过程按需处理,因此相比之下处理内容更少,速度也会更快。
  • 增量构建速度快:rebuild 过程中,只需处理编译单个模块。

无包构建的缺点

  • 浏览器网络请求数量剧增: 无包构建最主要面对的问题是,它的运行模式决定了在一般项目里,渲染页面所需发起的请求数远比打包构建要多得多,使得打开页面会产生瀑布式的大量网络请求,将对页面的渲染造成延迟。这也是 Vite 在开发环境下才使用无包构建,在生产环境下则仍旧使用打包构建的原因吧。
  • 浏览器的兼容性:

no-bundle 构建原理浅析

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开支付宝扫一扫,即可进行扫码打赏哦,您的支持,是我继续创作的动力。
点赞 (0)

中和威客保留所有权利,未经本站书面许可不得转载本站内容!文中观点不代表本站立场!

中和威客 IOS no-bundle 构建原理浅析 https://www.izhwk.com/archives/345

上一篇:

已经没有上一篇了!

no-bundle 构建原理浅析
下一篇: 什么是web2.0?
常见问题
  • 您需要注册成为本站会员,然后再通过会员中心的升级VIP功能,方可成为本站的VIP会员。
查看详情
  • 首先您需要注册成为本站会员,然后到会员中心充值,充值后支付对应资源的查看金额即可查看付费内容。
查看详情

相关文章

评论
暂无评论
no-bundle 构建原理浅析-海报

分享本文封面