【Webpack】Webpack 中 jsonp 的使用

ops/2024/10/18 18:18:04/

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

JSONP 在 Webpack 中的作用

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

具体使用场景：

代码分割（Code Splitting）和懒加载（Lazy Loading）
当你使用 import() 动态导入模块时，Webpack 会将这个模块拆分为一个单独的包，并且在运行时通过 JSONP 加载该包。
```
import('./module').then(module => {// 使用动态导入的模块
});
```
Webpack 在后台会生成多个文件，每个文件对应一个拆分后的模块。它通过 JSONP 加载这些文件，确保它们被正确地加载和执行。
Chunk 加载
当 Webpack 生成多个 chunk 时，主文件会包含一个 JSONP 回调函数。在需要加载某个 chunk 时，Webpack 会创建一个 <script> 标签指向相应的文件，文件加载后通过 JSONP 回调函数执行代码。

Webpack 内部有一个叫做 jsonpScriptSrc 的函数来生成 <script> 标签，用于加载需要的 chunk。它的基本工作流程如下：
- Webpack 运行时通过 <script> 标签加载 chunk 文件。
- chunk 文件加载后会通过 JSONP 回调，将模块挂载到 Webpack 的运行时中，完成模块注册。
运行时加载机制
在 Webpack 生成的 bundle 文件中，运行时会为动态导入的模块和其他按需加载的资源设置 JSONP 加载机制。每个 chunk 文件加载完成后会触发 Webpack 注册的回调，将该模块的导出值插入到依赖图中，使得其他模块可以访问到该值。

Webpack 中 JSONP 的实现原理

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

动态创建 <script> 标签：当需要加载某个模块时，Webpack 通过 JavaScript 动态生成一个 <script> 标签，设置其 src 属性为需要加载的 chunk 文件的 URL。
JSONP 回调机制：Webpack 会为每个 chunk 文件设置一个全局回调函数，当 chunk 文件加载完毕时，会执行这个回调来通知 Webpack 该模块已经加载完成。
模块注册：当回调函数被执行时，Webpack 会将新加载的模块注册到模块系统中，并将其标记为已加载，防止重复加载。

示例

在一个 Webpack 打包项目中，假设有两个 chunk 文件：main.js 和 0.js（动态加载的模块），Webpack 会为动态加载的模块生成如下结构的代码：

// 在 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__) {// 这里是被动态加载的模块}
}]);