【Webpack】Webpack 中 jsonp 的使用

Webpack 在处理模块加载时会使用 JSONP(JSON with Padding)技术,特别是在动态加载(异步加载)模块的场景中。

JSONP 在 Webpack 中的作用

Webpack 使用 JSONP 来实现代码拆分和按需加载。这种技术使得浏览器可以通过插入 <script> 标签来动态加载其他模块。因为 <script> 标签不会受到跨域限制,Webpack 可以利用 JSONP 来加载分离的模块文件。

具体使用场景:
  1. 代码分割(Code Splitting)和懒加载(Lazy Loading)

    当你使用 import() 动态导入模块时,Webpack 会将这个模块拆分为一个单独的包,并且在运行时通过 JSONP 加载该包。

    javascript 复制代码
    import('./module').then(module => {
      // 使用动态导入的模块
    });

    Webpack 在后台会生成多个文件,每个文件对应一个拆分后的模块。它通过 JSONP 加载这些文件,确保它们被正确地加载和执行。

  2. Chunk 加载

    当 Webpack 生成多个 chunk 时,主文件会包含一个 JSONP 回调函数。在需要加载某个 chunk 时,Webpack 会创建一个 <script> 标签指向相应的文件,文件加载后通过 JSONP 回调函数执行代码。

    Webpack 内部有一个叫做 jsonpScriptSrc 的函数来生成 <script> 标签,用于加载需要的 chunk。它的基本工作流程如下:

    • Webpack 运行时通过 <script> 标签加载 chunk 文件。
    • chunk 文件加载后会通过 JSONP 回调,将模块挂载到 Webpack 的运行时中,完成模块注册。
  3. 运行时加载机制

    在 Webpack 生成的 bundle 文件中,运行时会为动态导入的模块和其他按需加载的资源设置 JSONP 加载机制。每个 chunk 文件加载完成后会触发 Webpack 注册的回调,将该模块的导出值插入到依赖图中,使得其他模块可以访问到该值。

Webpack 中 JSONP 的实现原理

Webpack 运行时主要做了以下几件事来实现 JSONP:

  1. 动态创建 <script> 标签 :当需要加载某个模块时,Webpack 通过 JavaScript 动态生成一个 <script> 标签,设置其 src 属性为需要加载的 chunk 文件的 URL。

  2. JSONP 回调机制:Webpack 会为每个 chunk 文件设置一个全局回调函数,当 chunk 文件加载完毕时,会执行这个回调来通知 Webpack 该模块已经加载完成。

  3. 模块注册:当回调函数被执行时,Webpack 会将新加载的模块注册到模块系统中,并将其标记为已加载,防止重复加载。

示例

在一个 Webpack 打包项目中,假设有两个 chunk 文件:main.js0.js(动态加载的模块),Webpack 会为动态加载的模块生成如下结构的代码:

javascript 复制代码
// 在 main.js 中
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
jsonpArray.push([[0], {
  "./src/lazy.js": function (module, exports, __webpack_require__) {
    // 这里是模块的代码
  }
}]);

// 在 0.js 中
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0], {
  "./src/lazy.js": function (module, exports, __webpack_require__) {
    // 这里是被动态加载的模块
  }
}]);

总结

Webpack 使用了 JSONP 技术,特别是在实现代码分割和动态加载模块时。JSONP 通过 <script> 标签加载模块,并在加载完成后执行回调函数,完成模块的加载和注册。

相关推荐
小威编程11 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
喝旺仔la22 分钟前
Django知识进阶
前端·html
CL_IN35 分钟前
高效集成:聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius37 分钟前
14天速成前端 ------学习日志(已完结)------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行41 分钟前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求?
前端·javascript·vue.js·网络协议·http·webpack·node.js
超雄代码狂1 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式
风流野趣fly2 小时前
要做消息列表的颜色切换
前端
一心赚狗粮的宇叔2 小时前
java web调试时清理当前网址的缓存
java·前端·笔记·后端·缓存