ReactJS - create chunks automatically with lazy loading

Question

Let's suppose we have three pages and we want to split them into different chunks.That could happen if we manually add /* webpackChunkName: "chunkName" */.

const Home = lazy(() => import(/* webpackChunkName: "HomePage" */ "../../pages/Home"));
const Login = lazy(() => import(/* webpackChunkName: "Login" */ "../../pages/Login"));
const Register = lazy(() => import(/* webpackChunkName: "Register" */ "../../pages/Register"));

Is it possible to make our lives easier and avoid using webpackChunkName all the time?

Murli Prajapati · Accepted Answer · 2020-09-09 11:32:24Z

3

One way is to use [request] placeholder in chunk name comment to dynamically set the chunk name.

You can create a function which will call the import() function and use [request] placeholder to set the dynamic chunk name.

Afterwards, use this function to lazily import components.

Here is one example.

const lazyImport = path => {
  return import(/* webpackChunkName: "[request]" */ `${path}`);
};

const Home = React.lazy(() => lazyImport("../../pages/Home"));
// Chunk name will be pages-Home.chunk.js

answered Sep 9, 2020 at 11:32

Murli Prajapati

9,8535 gold badges42 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

ReactJS - create chunks automatically with lazy loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related