React 16.6
without further suspense...
presented by Joe Hsu
React.lazy
Allows you to render a dynamically loaded component as a normal component.
React.lazy
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
Suspense is a component that handles rendering lazy loaded components with a fallback while loading.
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
Previously
react-loadable
react-loadable
demo
some notes
- React.lazy and Suspense are not supported in the SSR path
- you control the error boundaries
- React.lazy only supports default exports
(put closing text)
React 16.6
By jhsu
React 16.6
- 359