Why webpack use jsonp to get chunk script

Question

I don't think there's a CORS issue.

Why webpack use jsonp to get chunk script?

This is generated webpackBootstrap.

/******/    // install a JSONP callback for chunk loading
/******/    var parentJsonpFunction = window["webpackJsonp"];
/******/    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/        // add "moreModules" to the modules object,
/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId, chunkId, i = 0, callbacks = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(installedChunks[chunkId])
/******/                callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/            installedChunks[chunkId] = 0;
/******/        }
/******/        for(moduleId in moreModules) {
/******/            modules[moduleId] = moreModules[moduleId];
/******/        }
/******/        if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/        while(callbacks.length)
/******/            callbacks.shift().call(null, __webpack_require__);
/******/    };

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

My thought here is,

Whether webpack uses JSON or JSONP, it has to append the loaded chunk file into the document.

So webpack team might have though that instead of getting the script file first (JSON) and then appending with the document, append the script tag first (JSONP) and then let the script tag load the file.

Nice explanation here on JSON and JSONP

edited May 23 '17 at 11:59

Community

1
1

answered Nov 23 '16 at 11:53

Thaadikkaaran

5,088
7
37
59

3

whaaaaaaaaaaaat – Glenn Mohammad Apr 10 '20 at 18:37

score 0 · Answer 2 · edited Dec 30 '19 at 10:52

Not sure I follow/understand the original answer. Here's my crack at it,

A JSONP is a javascript file which just contains a function wrapping JSON data. The name of that function can typically be named dynamically to whatever the requester wants it to be called,

// client code
function myCallback(data) { console.log(data); }

var jsonp = document.createElement("script");
jsonp.src = '/jsonp_server_route?callback=myCallback';
document.head.appendChild(jsonp);

// '/jsonp_server_route?callback=myCallback' served content
myCallback( { "foo": 1 } );

If you have a function named myCallback defined, myCallback will get called, and boom! You got your data... Like magic. But, it's actually just a clever javascript hack/technique (IMO of course).

Okay... How does this apply to Webpack chunk scripts?

Well, obviously chunk scripts are not necessarily JSON. They'll probably be script files most of the time. But, I think the same JSONP principle of wrapping something (could be JSON, a script, a string, etc) in a function can still apply.

Webpack probably wraps chunk scripts in a function. Hence, they use the verbiage 'JSONP'.

That's it. :)

PS
Since Webpack controls naming in all of the output files, the name for the JSONP callback function would already be known across files at build-time. So, the JSONP callback function name wouldn't need to be set dynamically (at run-time).

Why webpack use jsonp to get chunk script

2 Answers2