DEV Community

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

Posted on • Updated on

Add file extensions to your dynamic imports to reduce size

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!

Top comments (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

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