17 KiB
17 KiB
A common challenge with combining [chunkhash] and Code Splitting is that the entry chunk includes the webpack runtime and with it the chunkhash mappings. This means it's always updated and the [chunkhash] is pretty useless, because this chunk won't be cached.
A very simple solution to this problem is to create another chunk which contains only the webpack runtime (including chunkhash map). This can be achieved with the optimization.runtimeChunk options. To avoid the additional request for another chunk, this pretty small chunk can be inlined into the HTML page.
The configuration required for this is:
- use
[chunkhash]inoutput.filename(Note that this example doesn't do this because of the example generator infrastructure, but you should) - use
[chunkhash]inoutput.chunkFilename(Note that this example doesn't do this because of the example generator infrastructure, but you should)
example.js
// some module
import("./async1");
import("./async2");
webpack.config.js
var path = require("path");
module.exports = {
// mode: "development || "production",
entry: {
main: "./example"
},
optimization: {
runtimeChunk: true
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].[chunkhash].js",
chunkFilename: "[name].[chunkhash].js"
}
};
index.html
<html>
<head> </head>
<body>
<!-- inlined minimized file "runtime~main.[chunkhash].js" -->
<script>
(()=>{"use strict";var e={},r={};function t(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return e[o](n,n.exports,t),n.l=!0,n.exports}t.m=e,t.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);t.r(o);var n={};if(2&r&&"object"==typeof e&&e)for(const r in e)n[r]=()=>e[r];return n.default=()=>e,t.d(o,n),o},function(){var e=Object.prototype.hasOwnProperty;t.d=(r,t)=>{for(var o in t)e.call(t,o)&&!e.call(r,o)&&Object.defineProperty(r,o,{enumerable:!0,get:t[o]})}}(),t.f={},t.e=e=>Promise.all(Object.keys(t.f).reduce((r,o)=>(t.f[o](e,r),r),[])),t.u=e=>e+".[chunkhash].js",t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.p="dist/",function(){var e={303:0},r=[];t.f.j=(r,o)=>{var n=Object.prototype.hasOwnProperty.call(e,r)?e[r]:void 0;if(0!==n)if(n)o.push(n[2]);else{var a=new Promise((t,o)=>{n=e[r]=[t,o]});o.push(n[2]=a);var i,u=t.p+t.u(r),c=document.createElement("script");c.charset="utf-8",c.timeout=120,t.nc&&c.setAttribute("nonce",t.nc),c.src=u;var p=new Error;i=function(t){i=function(){},c.onerror=c.onload=null,clearTimeout(l);var o=(()=>{if(Object.prototype.hasOwnProperty.call(e,r)&&(0!==(n=e[r])&&(e[r]=void 0),n))return n[1]})();if(o){var a=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;p.message="Loading chunk "+r+" failed.\n("+a+": "+u+")",p.name="ChunkLoadError",p.type=a,p.request=u,o(p)}};var l=setTimeout((function(){i({type:"timeout",target:c})}),12e4);c.onerror=c.onload=i,document.head.appendChild(c)}};var o=()=>{};function n(){for(var o,n=0;n<r.length;n++){for(var a=r[n],i=!0,u=1;u<a.length;u++){var c=a[u];0!==e[c]&&(i=!1)}i&&(r.splice(n--,1),o=t(t.s=a[0]))}return o}function a(n){for(var a,i,u=n[0],c=n[1],l=n[2],s=n[3],f=0,d=[];f<u.length;f++)i=u[f],Object.prototype.hasOwnProperty.call(e,i)&&e[i]&&d.push(e[i][0]),e[i]=0;for(a in c)Object.prototype.hasOwnProperty.call(c,a)&&(t.m[a]=c[a]);for(s&&s(t),p&&p(n);d.length;)d.shift()();return l&&r.push.apply(r,l),o()}t.x=()=>(o=n)();var i=window.webpackJsonp=window.webpackJsonp||[],u=i.push.bind(i);i.push=a,i=i.slice();for(var c=0;c<i.length;c++)a(i[c]);var p=u}(),t.x()})();
</script>
<script src="dist/main.[chunkhash].js"></script>
</body>
</html>
dist/runtime~main.[chunkhash].js
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({});
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(__webpack_module_cache__[moduleId]) {
/******/ return __webpack_module_cache__[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/create fake namespace object */
/******/ !function() {
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = this(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ var def = {};
/******/ if(mode & 2 && typeof value == 'object' && value) {
/******/ for(const key in value) def[key] = () => value[key];
/******/ }
/******/ def['default'] = () => value;
/******/ __webpack_require__.d(ns, def);
/******/ return ns;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ var hasOwnProperty = Object.prototype.hasOwnProperty;
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(hasOwnProperty.call(definition, key) && !hasOwnProperty.call(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/ensure chunk */
/******/ !function() {
/******/ __webpack_require__.f = {};
/******/ // This file contains only the entry chunk.
/******/ // The chunk loading function for additional chunks
/******/ __webpack_require__.e = (chunkId) => {
/******/ return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
/******/ __webpack_require__.f[key](chunkId, promises);
/******/ return promises;
/******/ }, []));
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/get javascript chunk filename */
/******/ !function() {
/******/ // This function allow to reference async chunks
/******/ __webpack_require__.u = (chunkId) => {
/******/ // return url for filenames based on template
/******/ return "" + chunkId + ".[chunkhash].js";
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "dist/";
/******/ }();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ !function() {
/******/
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 0: 0
/******/ };
/******/
/******/ var deferredModules = [
/******/
/******/ ];
/******/
/******/
/******/ __webpack_require__.f.j = (chunkId, promises) => {
/******/ // JSONP chunk loading for javascript
/******/ var installedChunkData = Object.prototype.hasOwnProperty.call(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
/******/ if(installedChunkData !== 0) { // 0 means "already installed".
/******/
/******/ // a Promise means "currently loading".
/******/ if(installedChunkData) {
/******/ promises.push(installedChunkData[2]);
/******/ } else {
/******/ if(true) { // all chunks have JS
/******/ // setup Promise in chunk cache
/******/ var promise = new Promise((resolve, reject) => {
/******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
/******/ });
/******/ promises.push(installedChunkData[2] = promise);
/******/
/******/ // start chunk loading
/******/ var url = __webpack_require__.p + __webpack_require__.u(chunkId);
/******/ var loadingEnded = () => {
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId)) {
/******/ installedChunkData = installedChunks[chunkId];
/******/ if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
/******/ if(installedChunkData) return installedChunkData[1];
/******/ }
/******/ };
/******/ var script = document.createElement('script');
/******/ var onScriptComplete;
/******/
/******/ script.charset = 'utf-8';
/******/ script.timeout = 120;
/******/ if (__webpack_require__.nc) {
/******/ script.setAttribute("nonce", __webpack_require__.nc);
/******/ }
/******/ script.src = url;
/******/
/******/ // create error before stack unwound to get useful stacktrace later
/******/ var error = new Error();
/******/ onScriptComplete = function (event) {
/******/ onScriptComplete = function() {};
/******/ // avoid mem leaks in IE.
/******/ script.onerror = script.onload = null;
/******/ clearTimeout(timeout);
/******/ var reportError = loadingEnded();
/******/ if(reportError) {
/******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
/******/ var realSrc = event && event.target && event.target.src;
/******/ error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
/******/ error.name = 'ChunkLoadError';
/******/ error.type = errorType;
/******/ error.request = realSrc;
/******/ reportError(error);
/******/ }
/******/ };
/******/ var timeout = setTimeout(function(){
/******/ onScriptComplete({ type: 'timeout', target: script });
/******/ }, 120000);
/******/ script.onerror = script.onload = onScriptComplete;
/******/ document.head.appendChild(script);
/******/ } else installedChunks[chunkId] = 0;
/******/
/******/ // no HMR
/******/ }
/******/ }
/******/
/******/ // no chunk preloading needed
/******/ };
/******/
/******/ // no prefetching
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ var checkDeferredModules = () => {
/******/
/******/ };
/******/ function checkDeferredModulesImpl() {
/******/ var result;
/******/ for(var i = 0; i < deferredModules.length; i++) {
/******/ var deferredModule = deferredModules[i];
/******/ var fulfilled = true;
/******/ for(var j = 1; j < deferredModule.length; j++) {
/******/ var depId = deferredModule[j];
/******/ if(installedChunks[depId] !== 0) fulfilled = false;
/******/ }
/******/ if(fulfilled) {
/******/ deferredModules.splice(i--, 1);
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/ }
/******/ }
/******/ // no prefetch
/******/ return result;
/******/ }
/******/ __webpack_require__.x = () => {
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
/******/ };
/******/
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/ var runtime = data[3];
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) runtime(__webpack_require__);
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ // add entry modules from loaded chunk to deferred list
/******/ if(executeModules) deferredModules.push.apply(deferredModules, executeModules);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ };
/******/
/******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
/******/ var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
/******/ jsonpArray.push = webpackJsonpCallback;
/******/ jsonpArray = jsonpArray.slice();
/******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/ var parentJsonpFunction = oldJsonpFunction;
/******/ }();
/******/
/************************************************************************/
/******/ // run startup
/******/ return __webpack_require__.x();
/******/ })()
;
dist/main.[chunkhash].js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],[
/* 0 */
/*!********************!*\
!*** ./example.js ***!
\********************/
/*! exports [maybe provided (runtime-defined)] [no usage info] */
/*! runtime requirements: __webpack_require__.e, __webpack_require__.t, __webpack_require__.* */
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
// some module
__webpack_require__.e(/*! import() */ 2).then(__webpack_require__.t.bind(__webpack_require__, /*! ./async1 */ 1, 7));
__webpack_require__.e(/*! import() */ 3).then(__webpack_require__.t.bind(__webpack_require__, /*! ./async2 */ 2, 7));
/***/ })
],[[0,0]]]);
Info
Unoptimized
Hash: 0a1b2c3d4e5f6a7b8c9d
Version: webpack 5.0.0-beta.6
Asset Size
2.[chunkhash].js 314 bytes [emitted]
3.[chunkhash].js 308 bytes [emitted]
main.[chunkhash].js 676 bytes [emitted] [name: main]
runtime~main.[chunkhash].js 10.7 KiB [emitted] [name: runtime~main]
Entrypoint main = runtime~main.[chunkhash].js main.[chunkhash].js
chunk runtime~main.[chunkhash].js (runtime~main) 6.45 KiB [entry] [rendered]
> ./example main
7 chunk modules
chunk main.[chunkhash].js (main) 55 bytes [initial] [rendered]
> ./example main
./example.js 55 bytes [built]
[used exports unknown]
entry ./example main
chunk 2.[chunkhash].js 28 bytes [rendered]
> ./async1 ./example.js 2:0-18
./async1.js 28 bytes [built]
[used exports unknown]
import() ./async1 ./example.js 2:0-18
chunk 3.[chunkhash].js 28 bytes [rendered]
> ./async2 ./example.js 3:0-18
./async2.js 28 bytes [built]
[used exports unknown]
import() ./async2 ./example.js 3:0-18
Production mode
Hash: 0a1b2c3d4e5f6a7b8c9d
Version: webpack 5.0.0-beta.6
Asset Size
114.[chunkhash].js 73 bytes [emitted]
172.[chunkhash].js 73 bytes [emitted]
main.[chunkhash].js 155 bytes [emitted] [name: main]
runtime~main.[chunkhash].js 2.23 KiB [emitted] [name: runtime~main]
Entrypoint main = runtime~main.[chunkhash].js main.[chunkhash].js
chunk 114.[chunkhash].js 28 bytes [rendered]
> ./async1 ./example.js 2:0-18
./async1.js 28 bytes [built]
import() ./async1 ./example.js 2:0-18
chunk 172.[chunkhash].js 28 bytes [rendered]
> ./async2 ./example.js 3:0-18
./async2.js 28 bytes [built]
import() ./async2 ./example.js 3:0-18
chunk main.[chunkhash].js (main) 55 bytes [initial] [rendered]
> ./example main
./example.js 55 bytes [built]
[no exports used]
entry ./example main
chunk runtime~main.[chunkhash].js (runtime~main) 6.45 KiB [entry] [rendered]
> ./example main
7 chunk modules