Discussion on: Add file extensions to your dynamic imports to reduce size

View post

Can you write a sample with gzip for comparing - usual way and with your reduce strategy?

Hello denis! Thank you for asking! Here's a demo with this situation: codesandbox.io/s/webpack-dynamic-i...

And this is a copy of the webpack bundle:


/***/ "./src/dynamics lazy recursive ^\\.\\/.*$":
/*!*****************************************************!*\
  !*** ./src/dynamics lazy ^\.\/.*$ namespace object ***!
  \*****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var map = {
    "./a": [
        "./src/dynamics/a.js",
        0
    ],
    "./a.js": [
        "./src/dynamics/a.js",
        0
    ],
    "./b": [
        "./src/dynamics/b.js",
        1
    ],
    "./b.js": [
        "./src/dynamics/b.js",
        1
    ],
    "./c": [
        "./src/dynamics/c.js",
        2
    ],
    "./c.js": [
        "./src/dynamics/c.js",
        2
    ]
};
function webpackAsyncContext(req) {
    if(!__webpack_require__.o(map, req)) {
        return Promise.resolve().then(function() {
            var e = new Error("Cannot find module '" + req + "'");
            e.code = 'MODULE_NOT_FOUND';
            throw e;
        });
    }

    var ids = map[req], id = ids[0];
    return __webpack_require__.e(ids[1]).then(function() {
        return __webpack_require__(id);
    });
}
webpackAsyncContext.keys = function webpackAsyncContextKeys() {
    return Object.keys(map);
};
webpackAsyncContext.id = "./src/dynamics lazy recursive ^\\.\\/.*$";
module.exports = webpackAsyncContext;

/***/ }),

/***/ "./src/dynamics lazy recursive ^\\.\\/.*\\.js$":
/*!*********************************************************!*\
  !*** ./src/dynamics lazy ^\.\/.*\.js$ namespace object ***!
  \*********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var map = {
    "./a.js": [
        "./src/dynamics/a.js",
        0
    ],
    "./b.js": [
        "./src/dynamics/b.js",
        1
    ],
    "./c.js": [
        "./src/dynamics/c.js",
        2
    ]
};