DEV Community

loading...
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
I'm an Argentine developer. I like to learn everything, like full stack, ux/dx or svg/animation. I love sports, I do swimming and yoga πŸ§˜πŸ½β€β™‚οΈ!
・Updated on ・1 min read

UPDATE: Here's a codesandbox with this situation: https://codesandbox.io/s/webpack-dynamic-import-duplication-array-gv0gq

TL;DR

Instead of writing dynamic imports like this

import(`./my-path/${fileName}`)

Write them like this

import(`./my-path/${fileName}.ext`);

It will reduce the bundle size!

Long explanation

Yesterday I was reading the generated code by webpack and found something interesting:

var map = {
  "./en/_extras": [
    3,
    0
  ],
  "./en/_extras.js": [
    3,
    0
  ],
  "./en/color": [
    8,
    5
  ],
  "./en/color.js": [
    8,
    5
  ],
  // The rest of the files
};

That map object represent every possible chunk for an specific dynamic import, and it was twice the size I expected.

Then it hit me: I didn't wrote the file extension in my dynamic imports. When I did it, each of those objects reduced its sizes to match the numbers of files!

It's not like it will massively reduce your bundle size, but it's something you could get for free!

Discussion (2)

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 Author

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
    ]
};
Forem Open with the Forem app