Update dynamic-import docs #16803

lfades · 2020-09-03T02:57:36Z

Goals of this PR:

Explain import() first without mentioning next/dynamic, because next/dynamic in our API and Dynamic Import is a ES feature. This should avoid a common confusion in our users thinking that one can't be used without the other.
Mention how next/dynamic can be used with Dynamic Imports to load react components.
Updated example to include fuzzy search using a dynamic import.

Potential change: Leave the page to be about import() and move next/dynamic to the API reference (alongside next/link, next/router, etc.)

Closes #16299
Closes #15711

ijjk · 2020-09-03T03:06:52Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	12.2s	12s	-128ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.23	2.144	-0.09
/ avg req/sec	1120.98	1166.24	+45.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.177	1.126	-0.05
/error-in-render avg req/sec	2124.24	2221.06	+96.82

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
index.html gzip	972 B	972 B	✓
link.html gzip	978 B	978 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	14s	13.7s	-318ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.29 MB	5.29 MB	✓

Commit: 3d6b09d

ijjk · 2020-09-03T03:09:40Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	13.4s	13.2s	-137ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.511	2.446	-0.06
/ avg req/sec	995.69	1022.06	+26.37
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.474	1.516	⚠️ +0.04
/error-in-render avg req/sec	1695.77	1648.84	⚠️ -46.93

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
index.html gzip	972 B	972 B	✓
link.html gzip	978 B	978 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	14.8s	14.7s	-75ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.29 MB	5.29 MB	✓

Commit: e72f40c

chibicode · 2020-09-03T03:18:26Z

examples/with-dynamic-import/pages/index.js

+            const Fuse = (await import('fuse.js')).default
+            const fuse = new Fuse(names)


Should we memoize the result so that these lines would only need to be run once?

@chibicode I think that's not needed for the sake of the demo, it should be very fast in any case. This action doesn't delay user input and the module will only be imported once.

ijjk · 2020-09-03T03:19:07Z

Stats from current PR

Default Server Mode

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	14.3s	14.3s	⚠️ +28ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.674	2.653	-0.02
/ avg req/sec	935.04	942.3	+7.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.692	1.694	0
/error-in-render avg req/sec	1477.87	1475.37	⚠️ -2.5

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
index.html gzip	972 B	972 B	✓
link.html gzip	978 B	978 B	✓
withRouter.html gzip	964 B	964 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	16.3s	15.9s	-345ms
nodeModulesSize	55.9 MB	55.9 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..01b7.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f69b135..640b.js gzip	7.1 kB	7.1 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.39 kB	6.39 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ed2fed0..dule.js gzip	6.16 kB	6.16 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.29 MB	5.29 MB	✓

Commit: 0c6e68d

ijjk · 2020-09-05T23:34:07Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	12.6s	12.4s	-199ms
nodeModulesSize	56.7 MB	56.7 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.292	2.321	⚠️ +0.03
/ avg req/sec	1090.63	1077.35	⚠️ -13.28
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.377	1.356	-0.02
/error-in-render avg req/sec	1816.05	1843.56	+27.51

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..cf8c.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-0109a22..a8e8.js gzip	7.08 kB	7.08 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.4 kB	6.4 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8b2bf21..dule.js gzip	6.14 kB	6.14 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
index.html gzip	969 B	969 B	✓
link.html gzip	977 B	977 B	✓
withRouter.html gzip	963 B	963 B	✓
Overall change	2.91 kB	2.91 kB	✓

Serverless Mode

General

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
buildDuration	13.5s	13.6s	⚠️ +96ms
nodeModulesSize	56.7 MB	56.7 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..cf8c.js gzip	10.5 kB	10.5 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-0109a22..a8e8.js gzip	7.08 kB	7.08 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	57.3 kB	57.3 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
677f882d2ed8..dule.js gzip	6.4 kB	6.4 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8b2bf21..dule.js gzip	6.14 kB	6.14 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	52.3 kB	52.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-d2344ce..8b36.js gzip	1.3 kB	1.3 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.71 kB	7.71 kB	✓

Client Pages Modern

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-f8c0daf..dule.js gzip	1.26 kB	1.26 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.36 kB	5.36 kB	✓

Client Build Manifests

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	lfades/next.js docs/dynamic-import-update	Change
_error.js	1.03 MB	1.03 MB	✓
404.html	4.22 kB	4.22 kB	✓
hooks.html	3.86 kB	3.86 kB	✓
index.js	1.03 MB	1.03 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.29 MB	5.29 MB	✓

Commit: c3d4905

Goals of this PR: - Explain `import()` first without mentioning `next/dynamic`, because `next/dynamic` in our API and **Dynamic Import** is a ES feature. This should avoid a common confusion in our users thinking that one can't be used without the other. - Mention how `next/dynamic` can be used with **Dynamic Imports** to load react components. - Updated example to include fuzzy search using a dynamic import. Potential change: Leave the page to be about `import()` and move `next/dynamic` to the API reference (alongside `next/link`, `next/router`, etc.) Closes vercel#16299 Closes vercel#15711

Updated dynamic-import docs

3d6b09d

lfades requested review from chibicode, ijjk, Timer and timneutkens as code owners September 3, 2020 02:57

ijjk added the type: documentation label Sep 3, 2020

Open the example

e72f40c

Updated example

0c6e68d

lfades changed the title ~~Updated dynamic-import docs~~ Update dynamic-import docs Sep 3, 2020

ijjk added the examples Issue/PR related to examples label Sep 3, 2020

chibicode reviewed Sep 3, 2020

View reviewed changes

lfades mentioned this pull request Sep 5, 2020

Update dynamic import docs #16299

Closed

chibicode approved these changes Sep 5, 2020

View reviewed changes

Merge branch 'canary' into docs/dynamic-import-update

c3d4905

kodiakhq bot merged commit b5cf3e4 into vercel:canary Sep 5, 2020

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dynamic-import docs #16803

Update dynamic-import docs #16803

lfades commented Sep 3, 2020 •

edited

Loading

ijjk commented Sep 3, 2020

ijjk commented Sep 3, 2020

chibicode Sep 3, 2020

lfades Sep 5, 2020

ijjk commented Sep 3, 2020

ijjk commented Sep 5, 2020

		const Fuse = (await import('fuse.js')).default
		const fuse = new Fuse(names)

Update dynamic-import docs #16803

Update dynamic-import docs #16803

Conversation

lfades commented Sep 3, 2020 • edited Loading

ijjk commented Sep 3, 2020

Stats from current PR

ijjk commented Sep 3, 2020

Stats from current PR

chibicode Sep 3, 2020

Choose a reason for hiding this comment

lfades Sep 5, 2020

Choose a reason for hiding this comment

ijjk commented Sep 3, 2020

Stats from current PR

ijjk commented Sep 5, 2020

Stats from current PR

lfades commented Sep 3, 2020 •

edited

Loading