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
1
vote
0 answers

"mini-css-extract-plugin" every time injects a new number in main.js file on each build which changing contenthash number of main.js unnecessarily

I am using webpack 5, and using contenthash for the main.js file. But my main.js file gets a new hash number on every build even if there is nothing changed in my application. When I compared two main.js files from two different builds, then I found…
Sudarshan Tanwar
  • 3,537
  • 3
  • 24
  • 39
1
vote
0 answers

Does webpack runtime chunk need to be loaded first, last or any order?

When using Webpack, when configured to generate a runtime chunk and other chunks (such as vendor chunks), does it matter what order the runtime chunk is included onto the page relative to other chunks or can it be in any order? Assuming the…
Luke
  • 22,826
  • 31
  • 110
  • 193
1
vote
0 answers

Webpack 5 Auto Import Chunks For Entries

We have a multi page React app and the pages are ASP.NET pages that load the single transpiled entrypoints. We've been doing that fine for a while and the transpiled entries keep getting bigger and bigger in size (understandably). Now we would like…
minhtuanta
  • 89
  • 5
1
vote
1 answer

How can I exclude multiple files from splitchunk webpack?

Question I need to exclude multiple files from webpack optimization from splitchunk plugin. What I've tried const excludedFiles = ['file 1', 'file 2']; module.exports = { //... optimization: { splitChunks: { chunks (chunk) { …
Brian Serrano
  • 31
  • 2
1
vote
0 answers

Include required node modules within one specific entrypoint, and split them out from the rest into a vendors chunk

In my webpack config, I am using the standard use of split chunks: optimization: { splitChunks: { // include all types of chunks chunks: 'all', }, }, This properly creates a vendors chunk, and decouples my node modules from my…
pzhx
  • 11
  • 1
1
vote
0 answers

How to optimize a 250 pages(33MB) reactjs project with webpack?

We are using react.js 16.13.1. Our project has more than 250+ pages. After building using Webpack, it is 33MB. It is a huge size. It is taking 30s to load with an average internet speed. We are using Webpack 4. Also, we are using code splitting. The…
Renjith V R
  • 2,981
  • 2
  • 22
  • 32
1
vote
1 answer

How to import firebase and split its services into multiple split chunks using webpack?

Right now I'm doing: firebase.js import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore'; import 'firebase/functions'; import 'firebase/storage'; const config = { apiKey: process.env.FIREBASE_APP_API_KEY, …
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
1
vote
0 answers

How to config webpack - libraryTarget + splitChunks to import chunks in another project

I have a similar question to How to config webpack - libraryTarget + splitChunks + requaire in borwser. I wrote an npm plugin and compile it by webpack. Next, I installed it in the Nuxt project and add an import to this npm plugin in (for example)…
Dariusz Gardyński
  • 169
  • 3
  • 8
1
vote
1 answer

Webpack library build returns undefined when imported

Just sharing a problem and solution I spent hours on debugging: I have a codebase that I want to build as a library with webpack, and include in another project. However, when I import the output file in the other library, it returns undefined. This…
GroovyPanda
  • 3,694
  • 8
  • 31
  • 42
1
vote
1 answer

Webpack 4 SplitChunks outputting different chunk files in production and development mode

Is it normal for splitChunks to output different files in Production and Development mode? Is it possible to make sure the number/name of outputted files is the same between modes? This is my config: splitChunks: { cacheGroups: { …
user2753924
  • 465
  • 1
  • 5
  • 15
1
vote
1 answer

What are the reasons an imported Webpack module would not end up in a chunk?

We've got a fairly simple app/webpack setup which goes something like this: babel.config.js module.exports = { plugins: [...], presets: [ ['@babel/preset-env', { useBuiltIns: 'entry', corejs: '3' }] ] } index.js import…
papiro
  • 2,158
  • 1
  • 20
  • 29
1
vote
1 answer

webpack - split chunks

Webpack 4+ already comes with optimisation out of the box. There is still one unclear thing to me: Does deduplication happen across dependencies? example: /node_modules/foo has a bundled dependency 'foobar' but also /node_modules/bar has a bundled…
Hitmands
  • 13,491
  • 4
  • 34
  • 69
1
vote
1 answer

Webpack optimization splitChunks - generated webpack files

I've been looking at webpack bundling strategies and found a pretty good guide here: https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 It seems to advocate that lots of individual files is (often) the best way…
Michael Harper
  • 1,531
  • 2
  • 25
  • 42
1
vote
1 answer

Is there a way to use splitChunksPlugin in Webpack 4 to manually control which modules get placed into which output bundles?

I'm in kind of a unique situation where I need to break my bundle up into separate files but I don't have the luxury of having the total number of files or the names of those files changing over time as the app grows and new dependencies are…
rescuecreative
  • 3,607
  • 3
  • 18
  • 28
1
vote
1 answer

Create vendor.bundle for each entry with webapack 4

I want to make vendor.bundle for each entry with webapack4. example. src/ pages/ home/ index.js list/ index.js After building. dist/ pages/ home/ index.bundle.js home.vendor.bundle.js list/ …
kazaxy
  • 41
  • 5
1 2 3 4
5
6 7 8