What is the reason behind Webpack's behavior of loading all files from a folder during lazy loading

Question

What is the reason behind Webpack's behavior of loading all files from a folder during lazy loading

I am attempting to dynamically import i18n files using webpack:

function getI18n(lang) {
  return import(/* webpackChunkName "i18n/[request]" */ `./locales/${lang}.json`)
  .then(/*whatever*/)
}

However, I have noticed that all the files from the specified folder are being loaded even before the function is called:

i18n/en.json.js
i18n/ru.json.js
i18n/nl.json.js
i18n/nw.json.js

This is not the behavior I desire. I want to lazily load the required chunk dynamically during runtime.

An interesting observation is, if I rename the files ru to ru2 and nw to nw2 and adjust the import path accordingly, like this: ./locales/${lang}2.json, only the files i18n/ru2.json.js and i18n/nw2.json.js are loaded while the others without the character 2 in their name are ignored. It appears to operate based on a regular expression rather than an exact match.

Thank you

P.S. I am using vuejs and typescript, so the issue might be related to those technologies. I have been trying to follow this example vuei18n lazy load with my own code.

typescript vue.js webpack vuejs2 lazy-loading

Answer 1

Answer №1

When it comes to runtime, Webpack faces the challenge of not knowing which specific file from a directory will be needed, leading it to include all files in the bundle. (Check out more details here)

Answer 2

When it comes to runtime, Webpack faces the challenge of not knowing which specific file from a directory will be needed, leading it to include all files in the bundle. (Check out more details here)

Answer 3

Answer №2

The solution came easily:

vue-cli automatically includes the 'prefetch' feature by default. (which goes against the concept of lazy-loading)

You have the option to disable prefetch in your webpack configurations.
If you are utilizing "vue-cli", you will need to modify your vue.config.js:
```
chainWebpack: config => config.plugin.delete('prefetch')
```

Hopefully, this information proves helpful!

Answer 4

The solution came easily:

vue-cli automatically includes the 'prefetch' feature by default. (which goes against the concept of lazy-loading)

You have the option to disable prefetch in your webpack configurations.
If you are utilizing "vue-cli", you will need to modify your vue.config.js:
```
chainWebpack: config => config.plugin.delete('prefetch')
```

Hopefully, this information proves helpful!

Answer 5

Answer №3

If you want to turn off Vue CLI prefetch, you can use the configuration below specifically tailored for local languages. This information can also be found in the Vue CLI documentation here.

Here is the content of vue.config.js:

   ...
   chainWebpack: config => {
    // remove the prefetch plugin
    // config.plugins.delete("prefetch");

    // or:
    // modify its options:
    config.plugin("prefetch").tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/lang(.)+?\.js$/);
      options[0].fileBlacklist.push(/lang(.)+?\.js.map$/);
      return options;
    });
  },
  ...

Answer 6

If you want to turn off Vue CLI prefetch, you can use the configuration below specifically tailored for local languages. This information can also be found in the Vue CLI documentation here.

Here is the content of vue.config.js:

   ...
   chainWebpack: config => {
    // remove the prefetch plugin
    // config.plugins.delete("prefetch");

    // or:
    // modify its options:
    config.plugin("prefetch").tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/lang(.)+?\.js$/);
      options[0].fileBlacklist.push(/lang(.)+?\.js.map$/);
      return options;
    });
  },
  ...

What is the reason behind Webpack's behavior of loading all files from a folder during lazy loading

Answer №1

Answer №2

Answer №3

Similar questions

Guide to packaging TypeScript type declarations with an npm JavaScript library

Implementing a onClick event to change the color of individual icons in a group using Angular

Why does my useEffect consistently execute after the initial rendering, despite having specified dependencies?

Error encountered: Unable to locate module 'psl'

Ensuring the proper export of global.d.ts in an npm package

Unveiling the secret to accessing properties using v-if within a custom component template relocation

Passing the value of an Angular component to a different component

What steps can I take to resolve a dependency update causing issues in my code?

Transmitting document through HTML form using Laravel integration with Mailgun API

Incorporating a vanilla JS library (Pickr) into a NuxtJS page component

What is the best way to utilize derived types in TypeScript?

Implementing type inference for response.locals in Express with TypeScript

Exploring the functionality of window.matchmedia in React while incorporating Typescript

The NgModule recognition system does not detect my library module

I am experiencing difficulties in assigning values to a formArray

Which one to choose for creating a Kahoot-like app: Laravel Sanctum or Passport?

How long does it take to delete and recreate a cloudfront distribution using AWS CDK?

Navigate back to the main page using a tab

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

Exploring the world of tabbed dynamic routing in Angular 2 version 4