【Webpack】Webpack 中 jsonp 的使用
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 运行时通过
-
运行时加载机制
在 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__) {
// 这里是被动态加载的模块
}
}]);
总结
Webpack 使用了 JSONP 技术，特别是在实现代码分割和动态加载模块时。JSONP 通过 <script> 标签加载模块，并在加载完成后执行回调函数，完成模块的加载和注册。
原文地址：https://blog.csdn.net/XiugongHao/article/details/142846691
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！