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
4
votes
0 answers

How to configure splitChunks in webpack 4/5 to get separate vendor files?

Here's my webpack 3 configuraion. function isVendorJS(module) { if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) return false return module.context && module.context.includes('node_modules') } const…
Michael Yegorov
  • 71
  • 3
4
votes
0 answers

Code is not executed after splitChunks added on webpack config

i am trying to split a code in chunks and i face an issue. I have a script like import Component1 from 'Libs/component1'; import Component2 from 'Libs/component2'; import Component3 from 'Integrations/component3'; window.myComponent1 = new…
user1521944
  • 317
  • 1
  • 2
  • 14
4
votes
1 answer

Any Webpack splitchunks.name as a function documentation other than from the website?

with the introduction of webpack 4, splitChunks.name is used to define the name of a split chunk. here, the documentation says the key can be mapped to a function for custom…
nsun
  • 159
  • 2
  • 8
4
votes
0 answers

How to bundle vendor chunks which are in node_module directory

Is there a way to include chunk files created by dynamic import inside dependent module as chunk file in main application. Here is what I am trying - I have two npm modules, say M1, M2. M2 dynamically imports M1 using import() operator. While…
Akshay Garg
  • 41
  • 1
4
votes
0 answers

webpack split chunks put everything in one file

I have large application, and I want split it. Currently I have this structure: application.js < entry point Messages.js < application.js inner module SystemSetup.js < application.js inner module /node_modules/react.js < node modules Common.js <…
degr
  • 1,559
  • 1
  • 19
  • 37
3
votes
1 answer

Debugging webpack code splitting with React.lazy

I am using React.lazy to try to split off some code from my main application, but it's not working the way I expect and I'm having trouble figuring out how to debug. My code looks something like: // index.js import React from 'react'; import {…
mariaines
  • 497
  • 1
  • 5
  • 17
3
votes
1 answer

How to stop loading chunks from different pages in nextjs

I am trying to improve the lighthouse performance of my nextjs project but I keep on seeing unwanted js being loaded in the webpage. The following image is a screenshot of the coverage Some chunks of different pages are also being loaded. What can…
sam16930
  • 51
  • 5
3
votes
0 answers

'ChunkLoadError' occurs only to some users... why?

On a react + webpack project, after implementing code splitting, I started to see chunk load errors on the sentry. However, this is only happening to a few users. I have never encountered chunk load errors on the site, nor has any of my teammates.…
Katie
  • 392
  • 1
  • 10
3
votes
0 answers

Webpack 5 splitChunks configuration

I want to export testD file into 2 seperate files. One file which is called immediately and the other which is called async. From my webpack configuration, my settings are such that allow testD to be splitted into 2 files. But from the picture below…
Nick
  • 2,818
  • 5
  • 42
  • 60
3
votes
1 answer

Deploying an App with Code Splitting on GCP App Engine - Loading chunk * failed

We have a web application (frontend) using React created from Create React App. The app is running on Google Cloud Platform App Engine Standard. Our web application is code splitted. Each page is then loaded on user navigation. It's working really…
Charles-olivier Demers
  • 998
  • 7
  • 24
3
votes
0 answers

Using splitChunks.cacheGroups makes custom library undefined in webpack 5

We are trying to chunk specific files using webpack's optimization.splitChunks.cacheGroups feature but when we do the library that we have defined in the output is always undefined. If we remove the cacheGroups object we are able to access…
bilcker
  • 1,120
  • 1
  • 15
  • 43
3
votes
0 answers

Webpack-4 How to make independent and conditional splitChunks with multiple entries and SSR

I want to make multiple chunks from a certain bundle and use it conditionally rendered by server. The logic for put or not certain script inside the html is controlled by another app, is not a problem. I try Loadable Components, but do not works for…
Àngel Solé
  • 31
  • 3
3
votes
0 answers

Vuejs app not loading with webpack4 and splitchunks 'all'

I have a vuejs webapp that I am migrating from webpack3 to webpack4. I'm trying to update the config to use the new optimization tools, but when I run it, my app doesn't load. The main.js file exists but it doesn't seem to do anything, and dev tools…
laurian
  • 739
  • 6
  • 18
3
votes
1 answer

Webpack v4 creating tiny chunks (by route)

This is some of the code I'm using in my React app. My routes are written using react-router-config which allows me to keep a centralized way so I know where to go always in order to modify or add some. const routes = [ { component: Root, …
rmartrenado
  • 1,516
  • 1
  • 18
  • 42
3
votes
1 answer

htmlWebPack plugin publicPath not working as expected

My webpack output: output: { publicPath: path.join(basename, '/assets/'), path: `${__dirname}/built/core/assets/`, filename: '[name].[chunkhash].js', }, index.html template: <% for (var chunk in htmlWebpackPlugin.files.chunks) {…
Simas.B
  • 724
  • 1
  • 13
  • 31
1
2
3 4 5 6 7 8