Stack Overflow
Stack Overflow

Questions tagged [code-splitting]

Code-splitting is an alternative to large bundles, which is where JavaScript is split into smaller chunks.

Code-splitting is an alternative to large bundles, which is where JavaScript is split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand.

469 questions
206
votes
7 answers

How to dynamically load reducers for code splitting in a Redux application?

I'm going migrate to Redux. My application consists of a lot of parts (pages, components) so I want to create many reducers. Redux examples show that I should use combineReducers() to generate one reducer. Also as I understand Redux application…
Pavel Teterin
  • 2,091
  • 3
  • 13
  • 9
90
votes
8 answers

Webpack 4 - create vendor chunk

In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename:…
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166
68
votes
11 answers

How to overcome loading chunk failed with Angular lazy loaded modules

If I make changes to my angular app the chunk names will change on build and the old version will be removed from the dist folder. Once deployed, if a user is currently on the site, and then navigates to another part of the site, I get a "loading…
dottodot
  • 1,479
  • 1
  • 16
  • 24
30
votes
2 answers

Webpack code splitting: ChunkLoadError - Loading chunk X failed, but the chunk exists

I've integrated Sentry with my website a few days ago and I noticed that sometimes users receive this error in their console: ChunkLoadError: Loading chunk failed. (error: /-.js) So I investigated…
5imone
  • 301
  • 1
  • 3
  • 7
28
votes
2 answers

webpack 4 - split chunks plugin for multiple entries

Using split chunks plugin with the following config : { entry: { entry1: [entry1.js], entry2: [entry2.js], entry3: [entry3.js], ... } optimization: { splitChunks: { chunks: "all" …
Daniel
  • 6,194
  • 7
  • 33
  • 59
26
votes
4 answers

How to handle deploys with Webpack code splitting?

Here's an unexpected issue I've run into with Webpack code splitting in the wild: Imagine this scenario: The user loads a React app with Webpack code splitting and a few bundle chunks are loaded A deploy happens and the contents of any future…
Maros
  • 1,825
  • 4
  • 25
  • 56
25
votes
2 answers

Handle "Loading chunk failed" errors with Lazy-loading/Code-splitting

We are developing a Vue.js application based on Vue CLI 3 with Vue Router and Webpack. The routes are lazy-loaded and the chunk file names contain a hash for cache busting. In general, everything is working fine. However, there is a problem during…
str
  • 42,689
  • 17
  • 109
  • 127
19
votes
1 answer

Dynamic import named export using Webpack

Using webpack, if I want to code-split an entire module, I can change import Module from 'module' at the top of my file to import('module').then(Module => {... when I need to use the module (docs). Is it possible to do this but with just a single…
Daniel Elkington
  • 2,560
  • 6
  • 22
  • 35
16
votes
2 answers

How to split media queries under webpack config?

since we can import style sheets like below : and this will help faster…
Alireza
  • 2,319
  • 2
  • 23
  • 35
16
votes
2 answers

Wait for CSS to load before JS in React [FOUC]

We are building our new website entirely in React and utilizing code-splitting & scss. Whenever a new page is requested it loads the raw HTML in the browser first and then a split second or so later the css styling comes in, seems to be a FOUC…
Gregg
  • 1,477
  • 1
  • 16
  • 17
13
votes
1 answer

What is an async chunk in webpack?

This is probably a dummy question but after reading split-chunks-plugin documentation and this article about code splitting, i still can't understand what an async chunk refers to. The split-chunks-plugin documentation states about the chunks…
Samuel Maisonneuve
  • 1,025
  • 10
  • 21
12
votes
2 answers

How do I disable webpack 4 code splitting?

I'm using webpack 4.43.0. How do I prevent codesplitting from happening in webpack? All these files are created - 0.bundle.js up to 11.bundle.js (alongside the expected bundle.js), when I run webpack. Here's my webpack config: /* eslint-env node…
nnyby
  • 4,748
  • 10
  • 49
  • 105
12
votes
4 answers

How to get loading progress in React.lazy and Suspense

I'm using lazy to split my routes and I wanna know if there is any way I can get the loading progress in lazy and suspense. Currently I'm using it like this. const Home = lazy(() => import("./Home")); const About = lazy(() =>…
Thu San
  • 1,400
  • 1
  • 17
  • 29
11
votes
1 answer

Do nested Suspense components cause a sequential or a parallel load?

I understand that Suspense components are the React-ian approach to code splitting, which makes webpages load faster. Now, say you have a component hierarchy like this: }>
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
11
votes
3 answers

Why is webpack code splitting not working for me?

I'm using require.ensure to create split points at react-router paths. However, my build directory still only has app.js in addition to the vendor.js. I was expecting a separate js file for each path I used require.ensure. I used require.ensure at…
jasan
  • 11,475
  • 22
  • 57
  • 97
1
2 3
…
31 32