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
13
votes
3 answers

In webpack 4, how to only splitChunks on one entry?

I have two entries: page1.js, page2.js. I don't want to extract shared codes between two entries. I only want to extract node_modules used in page2.js. How do I achieve this in webpack 4? Thanks.
Chef
  • 633
  • 5
  • 17
12
votes
1 answer

ChunkLoadError: Loading chunk XY failed. - Randomly getting fatal on PRODUCTION

we have got our ecommerce platform already in production and we are experiencing weird ChunkLoadError. This error happens randomly, and is not replicable. When we are trying to open failed file it is there and can be loaded normaly. If user get's…
Ivan Kopčík
  • 121
  • 1
  • 1
  • 4
10
votes
2 answers

Auto-load a chunk in entry point

Webpack configuration is a part of Vue CLI setup (can be checked with vue inspect). This is a relevant part of it: entry: { foo: [ '.../src/foo.js' ], barWidget: [ '.../src/barWidget.js' ], }, optimization: { …
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
9
votes
1 answer

Webpack 5 vendors chunks naming

In webpack 4, vendors chunks had names such as vendors~main~secondary.js, which were referring to the chunks they where related to. Now, in webpack 5, vendors chunks names are like this : vendors-node_modules_react-dom_index_js.js, which is really…
tavoyne
  • 5,591
  • 2
  • 14
  • 24
9
votes
3 answers

How to handle new version deployement for Docker webpack application that use code splitting?

After deploying a new version of my application in Docker, I see my console having the following error that break my application: Uncaught SyntaxError: Unexpected token '<' In this screenshot, the source that is missing is called:…
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
7
votes
0 answers

webpack tree shaking and split chunks together

We are using webpack splitChunks for bundling shared packages, now we did tree shake on our modules. (Our icons, ui components, hooks and helpers are npm package). The problem is, our packages are fully tree shakable, but with splitChunks all of…
SayJeyHi
  • 1,559
  • 4
  • 19
  • 39
6
votes
1 answer

Webpack 5 splitChunks breaks WebpackDevServer

I started with a fresh copy of the create-react-app. I then ran eject, and wanted to add code splitting. However, whenever I add splitChunks: { automaticNameDelimiter: '.', chunks: 'all', }, The app is stuck on Starting the…
Amir
  • 4,211
  • 4
  • 23
  • 41
6
votes
0 answers

Webpack splitChunks how to get a chunk for each npm package (the chunk should include the dependencies for each package)

I want to split my chunks with Webpack the following way: Whenever I import an NPM package, like import styled from "styled-components"; I want a chunk like: styled-components.[contenthash:5].js // INCLUDING ITS DEPENDENCIES Here is the config…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
6
votes
0 answers

Dependencies of React.lazy component not being split into separate chunks

I'm trying to use React.lazy() to reduce the size of our main webpack bundle. The component that I'm lazy loading is successfully being split into its own js chunk that is downloaded on demand when needed. However, the dependencies of the lazy…
devthorne
  • 197
  • 13
6
votes
1 answer

Webpack splitChunks plugin - why does setting a priority of a chunk make its initialisation asynchronous?

I have a problem understanding the behaviour of Webpack splitChunks plugin. What I'm working on is rewriting old scripts on existing site into components and using Webpack for bundling. The bundles are just JS, most is loaded at the end of the…
actimel
  • 442
  • 6
  • 22
6
votes
1 answer

How to split dynamically by directories with Webpack/SplitChunks plugin?

I'm trying to split my React code (created with create-react-app) with the splitChunks plugin in the following way : I have following components (JSX) structure…
Przemek Dabrowski
  • 61
  • 4
5
votes
1 answer

How to Find the Chunks for a Webpack Entry

I'm using webpack to modernize a legacy multiple-page ASP.NET Web Forms application. I've had pretty good success with it up till I tried using the SplitChunksPlugin to de-dupe my bundles using its chunks: 'all' option. This unfortunately makes a…
Bondolin
  • 2,793
  • 7
  • 34
  • 62
5
votes
0 answers

Configuring Webpack to create bundles for groups of pages in Next JS

We are building a fairly large app, with quite a few pages. These pages can be divided to several distinct groups of pages that share many common dependencies among them, that are not used by pages in the other groups. If I were to sketch a rough…
TxH
  • 438
  • 1
  • 4
  • 12
5
votes
1 answer

Webpack 4 splitChunks generating multiple css

I'm trying to generate multiple css using webpack 4 min-css-extract-plugin and splitChunks plugin. Here is my webpack config. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = [{ …
SAGAR TALLA
  • 375
  • 4
  • 12
4
votes
1 answer

Webpack 5 Module Federation + splitchunks.chunks "all" error

I've been working on using ModuleFederation and have ran into an issue where if the remote webpack configuration had optimize.splitChunks.chunk = "all" then the host application would throw a loadScript exception. This could be a complete…
Michael Simonitsch
  • 53
  • 2
  • 10
1
2 3 4 5 6 7 8