Update with-dynamic-import example (#5201)
Follow up on: https://github.com/zeit/next.js/pull/4639
This commit is contained in:
parent
60b1d26f1f
commit
80a6160caf
2 changed files with 45 additions and 34 deletions
|
@ -1,7 +1,7 @@
|
|||
module.exports = {
|
||||
exportPathMap: function () {
|
||||
return {
|
||||
'/': { page: '/' },
|
||||
'/': { page: '/', query: { showMore: false } },
|
||||
'/about': { page: '/about' }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,35 +4,39 @@ import Header from '../components/Header'
|
|||
import Counter from '../components/Counter'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const DynamicComponent = dynamic(import('../components/hello1'))
|
||||
const DynamicComponentWithCustomLoading = dynamic(
|
||||
import('../components/hello2'),
|
||||
{
|
||||
loading: () => (<p>...</p>)
|
||||
}
|
||||
)
|
||||
const DynamicComponentWithNoSSR = dynamic(
|
||||
import('../components/hello3'),
|
||||
{ ssr: false }
|
||||
)
|
||||
const DynamicComponent5 = dynamic(import('../components/hello5'))
|
||||
const DynamicComponent1 = dynamic(import('../components/hello1'))
|
||||
|
||||
const DynamicComponent2WithCustomLoading = dynamic({
|
||||
loader: () => import('../components/hello2'),
|
||||
loading: () => (<p>Loading caused by client page transition ...</p>)
|
||||
})
|
||||
|
||||
const DynamicComponent3WithNoSSR = dynamic({
|
||||
loader: () => import('../components/hello3'),
|
||||
loading: () => (<p>Loading ...</p>),
|
||||
ssr: false
|
||||
})
|
||||
|
||||
const DynamicComponent4 = dynamic({
|
||||
loader: () => import('../components/hello4')
|
||||
})
|
||||
|
||||
const DynamicComponent5 = dynamic({
|
||||
loader: () => import('../components/hello5')
|
||||
})
|
||||
|
||||
const DynamicBundle = dynamic({
|
||||
modules: (props) => {
|
||||
modules: () => {
|
||||
const components = {
|
||||
Hello6: import('../components/hello6')
|
||||
Hello6: import('../components/hello6'),
|
||||
Hello7: import('../components/hello7')
|
||||
}
|
||||
|
||||
if (props.showMore) {
|
||||
components.Hello7 = import('../components/hello7')
|
||||
}
|
||||
|
||||
return components
|
||||
},
|
||||
render: (props, { Hello6, Hello7 }) => (
|
||||
<div style={{padding: 10, border: '1px solid #888'}}>
|
||||
<Hello6 />
|
||||
{Hello7 ? <Hello7 /> : null}
|
||||
<Hello7 />
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
@ -42,7 +46,7 @@ export default class Index extends React.Component {
|
|||
return { showMore: Boolean(query.showMore) }
|
||||
}
|
||||
|
||||
toggleShowMore () {
|
||||
toggleShowMore = () => {
|
||||
const { showMore } = this.props
|
||||
if (showMore) {
|
||||
Router.push('/')
|
||||
|
@ -58,18 +62,25 @@ export default class Index extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<DynamicComponent />
|
||||
<DynamicComponentWithCustomLoading />
|
||||
<DynamicComponentWithNoSSR />
|
||||
<DynamicBundle showMore={showMore} />
|
||||
<button onClick={() => this.toggleShowMore()}>Toggle Show More</button>
|
||||
{
|
||||
/*
|
||||
Since DynamicComponent5 does not render in the client,
|
||||
it won't get downloaded.
|
||||
*/
|
||||
}
|
||||
{ React.noSuchField === true ? <DynamicComponent5 /> : null }
|
||||
|
||||
{/* Load immediately, but in a sepeate bundle */}
|
||||
<DynamicComponent1 />
|
||||
|
||||
{/* Show a progress indicator while loading */}
|
||||
<DynamicComponent2WithCustomLoading />
|
||||
|
||||
{/* Load only on the client side */}
|
||||
<DynamicComponent3WithNoSSR />
|
||||
|
||||
{/* This component will never be loaded */}
|
||||
{React.noSuchField && <DynamicComponent4 />}
|
||||
|
||||
{/* Load on demand */}
|
||||
{showMore && <DynamicComponent5 />}
|
||||
<button onClick={this.toggleShowMore}>Toggle Show More</button>
|
||||
|
||||
{/* Load multible components in one bundle */}
|
||||
<DynamicBundle />
|
||||
|
||||
<p>HOME PAGE is here!</p>
|
||||
<Counter />
|
||||
|
|
Loading…
Reference in a new issue