code splitting with dynamic imports with typescript

Question

I am really struggling to find any good examples for typescript and code splitting.

There are babel plugins that cover this but really thin on the ground for typescript examples.

I am using react so I would like to use React.Lazy but I cannot find anything that covers the webpack code splitting side of things

I did find this old example but it uses the now deceased CommonsChunkPlugin:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: function (module) {
          // this assumes your vendor imports exist in the node_modules directory
          return module.context && module.context.includes("node_modules");
        }
      })
],

It uses react-loadable but obviously cannot use the babel plugin so the example is manually adding the magic webpack comments:

export const LoadableHello = Loadable({
    loader: () => import(/* webpackChunkName: "hello" */ "./Hello"),
    loading: () => <div>loading ...</div>
});

Can anyone help me understand:

How can I setup codesplitting for dynamic imports in the webpack side of things:
Can I use React.Lazy with typescript?

I think I need to make sure ts is not removing the comments.

I've used React.lazy in a Typescript projects. It works fine! — Tom Finney
– Tom Finney, Commented Mar 15, 2019 at 9:07
can you point me to an example of how to set up the webpack? Knowing you can do it just makes me all the more jealous :) — dagda1
– dagda1, Commented Mar 15, 2019 at 9:14
I'm not entirely familiar with configuring webpack for dynamic importing - I thought it was something that was supported out of the box. Taking a quick peak at their documentation would seem to confirm this: webpack.js.org/guides/code-splitting/#dynamic-imports Have you tried just using React.lazy and a dynamic import like: const Component = React.lazy(() => import('./Component')); assuming your React version is 16.6 + — Tom Finney
– Tom Finney, Commented Mar 15, 2019 at 9:27

dagda1 · Accepted Answer · 2019-03-15 20:09:57Z

1

The answer was to ensure these values were set in my tsconfig.json:

"compilerOptions": {
    "jsx": "react",
    "lib": ["es5", "es2015", "es2016", "dom", "es2015.promise"],
    "module": "esnext",
    "moduleResolution": "node"
  },

I then need to add the magical webpack comment to any lazy import, maybe you don't need to do this if you are using babel and typescript:

const TreeContainer = React.lazy(() =>
  import(/*
  webpackChunkName: "tree-container",
  webpackPrefetch: true
*/ '../TreeContainer')
);

This only worked on webpack 4.28.4. 4.29.x did not work.

answered Mar 15, 2019 at 20:09

dagda1

29.3k68 gold badges258 silver badges481 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kumaresan Sd Over a year ago

it is not working for me stackoverflow.com/questions/60056219/…

Alireza · Accepted Answer · 2019-03-15 09:35:54Z

0

webpack above version 2 supports Dynamic import works out of the box.

if you really interested in seeing some example try to install CRA with typescript support with this command. npx create-react-app my-app --typescript.

then browse to node_module and open react-sctipts package and browse to config folder and there you can find webpack config for both develop and production.

answered Mar 15, 2019 at 9:35

Alireza

2,4553 gold badges28 silver badges35 bronze badges

Comments

thisismydesign · Accepted Answer · 2020-08-04 01:25:36Z

0

Using create-react-app with Typescript there was no setup needed. You can take examples from the docs. E.g.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

answered Aug 4, 2020 at 1:25

thisismydesign

25.7k17 gold badges150 silver badges147 bronze badges

Collectives™ on Stack Overflow

code splitting with dynamic imports with typescript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related