without further suspense...
presented by Joe Hsu
Allows you to render a dynamically loaded component as a normal component.
React.lazy takes a function that must call a dynamic import()
React.lazy(() => import('...'))
This must return a Promise which resolves to a module with a default export containing a React component.
React.lazy(() => import('./SomeComponent'))
...
export default function SomeComponent() { ... }
module.exports = { | |
entry: { | |
main: './src/app.js', | |
}, | |
output: { | |
// `filename` provides a template for naming your bundles (remember to use `[name]`) | |
filename: '[name].bundle.js', | |
// `chunkFilename` provides a template for naming code-split bundles (optional) | |
chunkFilename: '[name].bundle.js', | |
// `path` is the folder where Webpack will place your bundles | |
path: './dist', | |
// `publicPath` is where Webpack will load your bundles from (optional) | |
publicPath: 'dist/' | |
} | |
}; |
Suspense is a component that handles rendering lazy loaded components with a fallback while loading.
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>