DEV Community

Cover image for Add file extensions to your dynamic imports to reduce size

Add file extensions to your dynamic imports to reduce size

Luciano Graziani on April 12, 2019

UPDATE: Here's a codesandbox with this situation: https://codesandbox.io/s/webpack-dynamic-import-duplication-array-gv0gq TL;DR Instead...
Read full post
Collapse
 
denisx profile image
denisx •

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

Collapse
 
lgraziani2712 profile image
Luciano Graziani •

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
    ]
};