question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Are nextjs's dynamic imports more performant than an array of components?

See original GitHub issue

Title may sound dumb, but I can’t use variables w/ the dynamic variables.

const t = './page'
dynamic(import(t))

Fails but dynamic(import('./page')) works.

That’s fine I guess - I’m currently circumventing this by having all of my templates in an array and using some logic to figure out which template to use by its key value.

However, it looks like I could maybe do this with the modules{} object that dynamic takes. Would it be more performant or would it ultimately be the same thing?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

11reactions
tweeres04commented, Oct 23, 2017

The TC39 proposal mentions passing a variable or template string literals in order to not only lazy load, but also pick which module to load at runtime based on some context. An example from the proposal is import(`./language-packs/${navigator.language}.js\`)

Will this ever be supported by next.js? I am hoping to achieve something like dynamic(import('./blog/${post-slug}`)), saving each of my blog posts as react components.

Either way, the documentation suggests the tc39 import spec is supported, which it only partially supports. I think some clarification on that would clear things up for some.

1reaction
Haraldsoncommented, Feb 28, 2018

No official statements on this yet?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Are nextjs's dynamic imports more performant than an array of ...
Fails but dynamic(import('./page')) works. That's fine I guess - I'm currently circumventing this by having all of my templates in an array ......
Read more >
Advanced Features: Dynamic Import - Next.js
Dynamically import JavaScript modules and React Components and split your code into manageable chunks.
Read more >
Dynamic imports and code splitting with Next.js
Unlike static imports, dynamic imports work by applying a method known as code splitting. Code splitting is the division of code into various ......
Read more >
Best practices to increase the speed for Next.js apps
Dynamic import allows you to split your code into small chunks and load them on demand.
Read more >
Dynamically Importing Components with React.lazy
With the introduction of dynamic imports in ES2020, we can load modules dynamically rather than statically. In just one line of pure ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found