Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ignore chunk via webpack comment #6

Open
CzBiX opened this issue Mar 17, 2020 · 3 comments
Open

Ignore chunk via webpack comment #6

CzBiX opened this issue Mar 17, 2020 · 3 comments

Comments

@CzBiX
Copy link

CzBiX commented Mar 17, 2020

I tried add webpack comment to disable prefetch/preload, but the chunck still builded into html as rel="prefetch".
Is it possible to disable it without modify blacklist in webpack config?

My code:

await import(/* webpackPrefetch: false */ 'some-module')
@plehnen
Copy link

plehnen commented Sep 24, 2020

I am facing the same issue. /* webpackChunkName: "IntlPolyfill" */ works fine, but /* webpackPrefetch: false */ is simply ignored. Would be great if this can be fixed!

@penance316
Copy link

penance316 commented Dec 28, 2020

I am having the same issues as described above.
Seems the webpack commend webpackPrefetch is ignored.
This is a real blocker for me as I want to lazy load the dynamic imports when required but having prefetch always true means all my dynamic imports are loaded even if I do not need them.

Has anyone got any ideas on how/where this should be fixed?

Thanks all

EDIT:
For now I have created a workaround by configuring the prefetch plugin to ignore chunks starting with "noprefetch". Then adding a webpack comment like
/* webpackChunkName: "noprefetch-[request]" */

Plugin configuration

config.plugin("prefetch").tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/\.map$/);
      options[0].fileBlacklist.push(/hot-update\.js$/);

      // Force prefetch to not grab bundles marked as noprefetch.
      options[0].fileBlacklist.push(/noprefetch.*\.js/);   <====================HERE

      return options;
    });

@signal-intrusion
Copy link

This feels like a requirement for my use case:
We want to async import() some modules in dev, test, staging envs only. We do not want those modules in production code. With vanilla webpack, modules are not prefetched unless you opt-in, so we can avoid bundling and shipping those modules by not using /* webpackPrefetch: true */ . In vue-cli webpack, modules are ALWAYS prefetched, and there is no way to /* webpackPrefetch: false */.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants