Code Splitting With Dynamic Imports

Benefits

Better UX

Breaks your JavaScript bundle into multiple modules that intelligently load only when a user uses that functionality.
Loading and wait times are improved application-wide.

Hosting-Costs – Lowers overall “Bytes Tr…


This content originally appeared on DEV Community and was authored by Russell Brooks

Benefits

  • Better UX
    • Breaks your JavaScript bundle into multiple modules that intelligently load only when a user uses that functionality.
    • Loading and wait times are improved application-wide.
  • Hosting-Costs - Lowers overall "Bytes Transferred" every month.

How To

Dynamic Imports is already enabled by default in WebPack. All you need to do is make a small change to your "import" lines, and wrap the component in React's <Suspense> component. Eg:

import React, { Suspense } from 'react';

const SubComponent = React.lazy(() => mport('./SubComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SubComponent />
      </Suspense>
    </div>
  );
}

I had to comment out this line of our tsconfig.json or I got an transpile error. This makes it default back to "CommonJS", which is an older JS standard, but that had no effect on our compiles. Our large React/TS application compiled fine. This is an Output setting; not an Input setting. It only changes the format of JS files that are output to the browser.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "lib": ["es6", "dom"],
    // "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "types": ["jest", "node", "react", "@testing-library/jest-dom"],
    "esModuleInterop": true
  },
  ...
}

You can see in CDT, this caused two additional "chunk.js" files to be created, and these files only loaded when that user clicked on that functionality - opened a modal in this case.

Screenshot of Chrome Dev Tools

Have you team continue to adopt this import syntax, and gradually your JS code will be split into smartly loading modules.


This content originally appeared on DEV Community and was authored by Russell Brooks


Print Share Comment Cite Upload Translate Updates
APA

Russell Brooks | Sciencx (2021-09-03T23:44:04+00:00) Code Splitting With Dynamic Imports. Retrieved from https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/

MLA
" » Code Splitting With Dynamic Imports." Russell Brooks | Sciencx - Friday September 3, 2021, https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/
HARVARD
Russell Brooks | Sciencx Friday September 3, 2021 » Code Splitting With Dynamic Imports., viewed ,<https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/>
VANCOUVER
Russell Brooks | Sciencx - » Code Splitting With Dynamic Imports. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/
CHICAGO
" » Code Splitting With Dynamic Imports." Russell Brooks | Sciencx - Accessed . https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/
IEEE
" » Code Splitting With Dynamic Imports." Russell Brooks | Sciencx [Online]. Available: https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/. [Accessed: ]
rf:citation
» Code Splitting With Dynamic Imports | Russell Brooks | Sciencx | https://www.scien.cx/2021/09/03/code-splitting-with-dynamic-imports/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts