I have a project and it's huge. And when I write npm start it takes 6 to 8 minutes to load. Is it possible to make it so that you can first quickly load the sign in page, and only then everything else?

CodePudding user response：

To answer this question correctly, would need some specifics of the project like

• How is it structured ?
• Is it decoupled enough ?
• Can components work separately from each other ?

Nevertheless, if its only a signup page, I assume there will be a simple input form and a network call for authorization.

To make this work, extract the component responsible for authentication into a single component, and if the component has some extra dependencies, try to lazy load them with lazy imports

import { lazy } from 'react';

const later_package = lazy(() => { import './later_dependency'})

Note: the above lazy import only works with default imports.

• more about code splitting here

for webpack do some bundle analysis for the bundle check if the bundle dependencies are what are slowing down the build. If not, split the entry points. More about Webpack code-splitting here