Add file extensions to your dynamic imports to reduce size

#webperf #javascript #beginners #webpack

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)

denisx • Dec 18 '19

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

Luciano Graziani • Dec 18 '19

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

DEV Community

Add file extensions to your dynamic imports to reduce size

TL;DR

Long explanation

Top comments (2)

Read next

Building an Interactive Kids Story Generator with React Native and Hugging Face API

HTML meta 標籤中 viewport 的設定

Avoiding Connection Pinning in Lambda and RDS Proxy with NestJS and Proxy Splitting

Unlocking Efficient Training for AI Language Giants: Deep Optimizer States