feat: support webpack magic comments #197
Conversation
|
Seems a nice improvement 👍 /cc @clarkdo Confirming if nuxt supports webpack hints for server-renderer manifest. |
|
I’ll do some testing and double check in nuxt for SSR |
templates/components/plugin.js
Outdated
| return ` ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))` | ||
| const magicComments = [ | ||
| `webpackChunkName: "${c.chunkName}"`, | ||
| c.prefetch ? `webpackPrefetch: ${c.prefetch ? 'true' : 'false'}` : false, |
There was a problem hiding this comment.
webpackPrefetch and webpackPreload expected true or a number, so I think we can remove false.
There was a problem hiding this comment.
Thank you for pointing out!
I made the parts more type-strict.
nozomuikuta
changed the title
README.md
Outdated
| - Type: `Boolean/Number` | ||
| - Default: `false` | ||
|
|
||
| These properties are used for Wepack's magic comments, learn more in [Wepack's official documentation](https://webpack.js.org/api/module-methods/#magic-comments). |
There was a problem hiding this comment.
It would be nice to mention it is effective only when Lazy prefix is used. During development, we don't enable loader so it affects every component but in production, detected components are directly imported via installComponents instead of async imports.
There was a problem hiding this comment.
Thank you, I updated README by 6c33178.
|
Sorry for newbie question, but what is difference between templates: As far as I see, the file isn't invoked from anywhere...? |
|
@nozomuikuta index file is mainly for custom integrations like testing and not used directly. But would be nice if you can add it to that file too so we won't forget about if used in the future. Mergin to avoid stalling. PR for improvement welcome and thanks <3 |
This PR is to support #71 in some way.
I just read through the code of this module once, so I may not be misunderstanding the implementation and making mistakes in approach. But, still, I will submit this PR with WIP in the title, so that everyone can point them out and/or have a discussion on my implementation.
According to Webpack's documentation, there are 6 kinds of magic comments supported by Webpack 4+, and they can be combined.
webpackIncludewebpackExcludewebpackChunkNamewebpackModewebpackPrefetchwebpackPreloadIn the context of component importing, I think it would be enough to support only
preferchandpreload(at least to resolve #71).The author of the issue wants to set magic comment per component in the place where it's used.
However, it will be hassle to detect them in build pipeline.
In addition, I guess it is likely that lazy components are wanted to be prefetched or preloaded, regardless of the places they are used.
So, IMO, it will be reasonable to configure it before components are handled by the loader (or before they are imported).
My approach is to add 2 properties to objects of
componentsarray module option:prefetchandpreload.This would be simplest in terms of code and API change. In this way, all the components under specific directories are configured same.
2nd possible approach will be to provide a way to configure magic comments per component.
In this approach, API would get to be a little bit complicated.
3rd approach will be to statically add magic comments in
importstatement in the loader.I know "no option" is best design sometimes, but I'm not sure it's now.
I do appreciate any feedback.
P.S.
This is my very first PR to Nuxt Component modules, after Nuxt Content. 👶
I hope that my PR will be consequently merged and used by Nuxt Core.
TODO