Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/latentflip/code-split
https://github.com/latentflip/code-split
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/latentflip/code-split
- Owner: latentflip
- Created: 2016-02-11T14:58:19.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-02-11T15:15:09.000Z (almost 9 years ago)
- Last Synced: 2024-04-15T02:17:43.942Z (7 months ago)
- Language: JavaScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic code splitting
In app.js we have the following:
```javascript
window.goA = function () {
require.ensure(['./a'], function (require) {
console.log(require('./a'));
});
};
window.goB = function () {
require.ensure(['./b'], function (require) {
console.log(require('./b'));
});
};
```
and a/b look like this:
```javascript
console.log('Loaded b');
module.exports = 'This is b';
```
If you look at the bundled output [dist/app.js](./dist/app.js) you'll see that the contents of a and b are not there. And if you load the app (`npm install && npm start`) you'll see that they aren't run either. There are however two additional bundled files in `dist/` [dist/1.app.js](./dist/1.app.js) and [dist/2.app.js](./dist/2.app.js)
However, if you hop into a console, and run `goA()` or `goB()` you'll see that the extra script tags are loaded on demand, and then when they've loaded, the console.logs are run.
If you look at the full output of `app.js` you can just about make out what's happening, `require.e` (ensure) loads the script tag on demand and executes your callback once it's loaded.
```javascript
/******/ (function(modules) { // 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__);
/******/ };
/******/ // The module cache
/******/ var installedModules = {};
/******/ // object to store loaded and loading chunks
/******/ // "0" means "already loaded"
/******/ // Array means "loading", array contains callbacks
/******/ var installedChunks = {
/******/ 0:0
/******/ };
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] === 0)
/******/ return callback.call(null, __webpack_require__);
/******/ // an array means "currently loading".
/******/ if(installedChunks[chunkId] !== undefined) {
/******/ installedChunks[chunkId].push(callback);
/******/ } else {
/******/ // start chunk loading
/******/ installedChunks[chunkId] = [callback];
/******/ var head = document.getElementsByTagName('head')[0];
/******/ var script = document.createElement('script');
/******/ script.type = 'text/javascript';
/******/ script.charset = 'utf-8';
/******/ script.async = true;
/******/ script.src = __webpack_require__.p + "" + chunkId + ".app.js";
/******/ head.appendChild(script);
/******/ }
/******/ };
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
window.goA = function () {
__webpack_require__.e/* nsure */(1, function (require) {
console.log(__webpack_require__(1));
});
};
window.goB = function () {
__webpack_require__.e/* nsure */(2, function (require) {
console.log(__webpack_require__(2));
});
};
/***/ }
/******/ ]);
```