Stack Overflow
Stack Overflow

Questions tagged [webpack-splitchunks]

Use it for optimization.splitChunks configuration questions.

Bundle can be divided for smaller pieces (chunks) to achieve:

  1. lazy loading;
  2. parallel loading;
  3. moving stable part of bundle to special 'vendor' chunk that could be cached individually;
  4. avoid loading duplicated code between multiple entrypoints.

Further reading: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

120 questions
0
votes
0 answers

Chunk siblings in stats.json and loading order

I had an impression that if a webpack chunk depends on other chunks then its dependencies are loaded before this chunk by the webpack runtime. Take this example: /* * ATTENTION: An "eval-source-map" devtool has been used. * This devtool is neither…
JeB
  • 11,653
  • 10
  • 58
  • 87
0
votes
1 answer

Upgrading to Webpack 5 and now my splitChunks are not working correctly

I just upgraded to Webpack 5 and noticed that the splitChunks are not working as they were before. Here is my code splitChunks: { chunks: 'all', maxInitialRequests: Infinity, cacheGroups: { common: { test:…
Komakino_1251
  • 220
  • 2
  • 13
0
votes
0 answers

How can I stop Next.js from loading other chunks from another page?

I am currently working on a Next.js application and I am trying to reduce the number of chunks loading on one of the pages, book/[...id]. After inspecting the build-manifest.json I can see the page is loading a number of chunks from the root page.…
Sai
  • 801
  • 3
  • 10
  • 27
0
votes
0 answers

ChunkLoadError: Loading chunk 597 failed. React webpack

i am creating react library. when i use that libary in my project i am facing this issue (https://i.stack.imgur.com/HymU0.png)](https://i.stack.imgur.com/HymU0.png) This is my webpack.config file var path = require("path"); module.exports = { …
Mufeez Khalid
  • 1
0
votes
0 answers

Disable js chunks in React App deployed on Firebase

I have created an app that allows users to search through tables of data, these tables pull data from a json file I have on my react app. Long story short, the chunk files on the browser exposes this json data and although it isn't sensitive…
Sylphonyx
  • 11
  • 2
0
votes
0 answers

Bunding modules into chunk groups with webpack cacheGroups

In our application, each module is dynamically downloaded based on a condition, and we want to control which modules are bundled together (using webpack). So for example assume we have the following code: if (condition1) m1 = import('./m1') if…
Gil
  • 97
  • 2
  • 10
0
votes
0 answers

Splitting Angular Dependencies in to separate bundle files

My website is an Angular SPA with SSR that works perfectly. To lazy load the components based on the path, I used lazy loaded modules. Because of the libraries I use, my main.js file is roughly 3MB, which increases the Total Blocking Time (TBT) on…
Tom
  • 183
  • 1
  • 1
  • 9
0
votes
0 answers

Is it possible to use require() syntax with module "esnext" defined in tsconfig?

My previous tsconfig.json had the following option: "module": "commonjs", To get lazy loading React components to work I had to change it to this: "module": "esnext", "moduleResolution": "node", Which works for lazy loading but other parts of the…
JonnySins666
  • 65
  • 1
  • 5
0
votes
1 answer

Uncaught TypeError: __webpack_require__.r is not a function

I have a multi-entry application in which multiple entries are loaded in one web page. Here I get the following error "Uncaught TypeError: webpack_require.r is not a function". I analysed the webpack build outputs and come to the following…
Joep Ronde
  • 21
  • 1
  • 4
0
votes
0 answers

Webpack 5: Create vendor chunk(s) from .js files

Simply I want to insert vendor scripts in my HTML template. These scripts are collected in the src/vendor directory. I want to import them in my template HTML file as When I run…
michaelT
  • 1,533
  • 12
  • 41
0
votes
0 answers

Webpack: Allow duplication of specific modules when using SplitChunks

Is it possible to specify libraries you actually want duplicated across bundles when using webpack splitchunk?? Context: I am working with a large monorepo with multiple packages and entry points. The current webpack configuration uses {…
maxwellutd
  • 1
0
votes
1 answer

Webpack 4 SplitChunks, grouping asynchronous chunks to certain size

We are trying to optimize our webpack bundling.Now we have a lot of small chunks generated, but we want to group them according to some rules: Node modules and code should be separated, eg. A chunk is either all node_modules or all code Each chunk…
Poomrokc The 3years
  • 1,099
  • 2
  • 10
  • 23
0
votes
1 answer

export webpack chunk graph to json

Question: How do I get the dependency chunk graph ahead of time without parsing the final bundle? Best would be as json. Why: With webpacks default chunk splitting strategy it creates common chunks that multiple other chunks depend on. E.g. two…
sod
  • 3,804
  • 5
  • 22
  • 28
0
votes
1 answer

Laravel webpackChunkName create wrong folder with tilde (~) char in chunks files

I am developing a web app using laravel, vuejs and creating dynamic loaded chunk files using webpack mix. But when i run npm run watch/ npm run prod its creating some wrong folder with tilde(~) name into chunk folder. How to fix it ? Wrong file…
Md. Razu Haolader
  • 1
  • 2
0
votes
1 answer

Webpack: emitted chunks do not create a main entrypoint

I upgraded webpack from version 2 to version 4. My config includes: entry = { Main: './main', App: './app' }; and var output = { path: path.join(__dirname, outPath, '_js'), publicPath: '/_js/', filename:…
Emanuele Ciriachi
  • 2,216
  • 2
  • 26
  • 39
1 2 3 4 5 6
7
8