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
2
votes
1 answer

vue cli how to create a custom chunk and hook in index.html?

I want to create a custom chunk and attach in generated index.html. I created a custom project using vue create . and added a vue.config.js file. vue.config.js module.exports = { lintOnSave: true, configureWebpack: { optimization: { …
coure2011
  • 40,286
  • 83
  • 216
  • 349
2
votes
1 answer

How to upgrade Webpack 3 CommonsChunkPlugin config to Webpack 4 splitChunks while maintaining same behaviour for this case?

I'm trying to migrate from Webpack 3 to 4, and that requires me to change from using CommonsChunkPlugin to splitChunks. But I'm struggling to maintain the same behaviour. My Webpack 3 code: webpack.config.js entry: { vendor: ['jquery',…
Henry Yang
  • 2,283
  • 3
  • 21
  • 38
2
votes
1 answer

webpack 4 splitChunks.maxSize - what does this value mean? Is it KB? Bytes? Just some value?

I am trying to split my vendor chunk in a Vue JS app using Webpack 4. I have been able to get reasonable results with this setting: config.optimization.set('splitChunks', { cacheGroups: { vendors: { name:…
Karen B
  • 331
  • 2
  • 9
2
votes
0 answers

SplitChunks is referencing window even when I opt a bundle out

I am trying to use SplitChunks on a Webpack 4 application, but I am seeing "window is not defined". I am trying to opt my SSR bundle out of being chunked or affected by chunking in any way, but it isn't working: const { environment } =…
Brandon
  • 1,735
  • 2
  • 22
  • 37
2
votes
1 answer

Webpack 4 SplitChunkPlugin's maxSize vs maxInitialRequests

When setting maxSize to 100000 for example, I get more initial chunks than the value of maxInitialRequests. I get 7 (bootstrap, main + 5 vendor chunks) where as my maxInitialRequests is set to 3. My expectation is that total initial chunks should be…
geeko
  • 2,649
  • 4
  • 32
  • 59
2
votes
1 answer

webpack split js files, get one more files

when I use webpack 4 to split js files, then i get the dist directory contains: app.js, vendor.js and one more js file names vendor~app.js, how and why it comes? Here are those files: and this is my webpack config: const path =…
Y.zaig
  • 33
  • 1
  • 4
2
votes
1 answer

How to know if Webpack's 4 splitChunks works?

I tried to add optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, To my webpack config file but when…
shinzou
  • 5,850
  • 10
  • 60
  • 124
2
votes
1 answer

Webpack 4 splitchunks, how to force common chunks?

I'm trying to split a project into commons chunks, it'was easy with the old commonChunks plugin because the project is designed to be splitted into kinds of libraries... With the new splitChunks i cannot achieve the same result. So i came back to a…
Coolhand
  • 106
  • 1
  • 9
1
vote
0 answers

ChunkLoadError: Loading chunk [number] failed. (error: https://path-to-chunk-[number])

My app is using React and Webpack of Laravel-mix to dynamically load components for each route. And this is my webpack output config: output: { chunkFilename: '[name].js?id=[chunkhash]' } This means that a component's chunkhash only changes…
iamphonghg
  • 43
  • 7
1
vote
1 answer

Webpack Chunks split for website and widget (based on entrypoint)

I have two webpack entrypoints: index and widget. The index entrypoint generates the necessary entry for our main webpage. The widget entrypoint generates a stripped down version without footer and header, so it can be integrated via an iFrame. But…
velop
  • 3,102
  • 1
  • 27
  • 30
1
vote
0 answers

Webpack chunks larger when building for production

When executing Webpack 4 for development and production mode the chunks for development are smaller than when built for production. I am currently using the following Webpack 4 configuration; const webpack = require('webpack'); const path =…
pcvnes
  • 927
  • 2
  • 15
  • 41
1
vote
0 answers

Angular 11 lazy loading chunks have multiples of default chunk for one module

I have an app I recently upgraded to Angular 11, and I wanted to improve performance so I added in a core module (just for services, imported in root module), shared module (imported in many feature modules), and some feature modules, and I load the…
kiwrezc2000
  • 11
  • 3
1
vote
0 answers

How to reproduce a chunk load error in React Native app locally

I'm trying to figure out a solution to the ChunkLoadError that occurs when a user has a tab open for a long period of time, switches routes, and gets an error because the newly deployed version of the app no longer serves those old JS chunk files.…
Srujan
  • 21
  • 4
1
vote
0 answers

React in WordPress plugin with split bundles for public and admin side

I'm working on a WordPress plugin using React. I started off https://github.com/robicse11127/wp-react-kickoff as a base and everything works fine, except for the part where it generates one single bundle for the whole React app. Since my plugin…
Charlie Merland
  • 21
  • 3
1
vote
1 answer

set runtime public path for webworker chunkloading stub

I have a webpack library which contains a webworker (imported via the 'magic' worker handler) and I am trying to run this library from another project (in this instance an angular project). I have correctly copied the worker (and worker chunk) files…
Russell
  • 11
  • 2
1 2 3
4
5 6 7 8