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

How to get webpack4 chunkhash value to use in script src inside the html automatically?

How can I get the chunkhash value generated by webpack4 so that I can use it inside my index.html to set properly the script src? Brief context: Hope it not to be a stupid question because I am completely newcomer in webpack, started to learn today.…
sdlins
  • 2,195
  • 1
  • 23
  • 31
3
votes
1 answer

How to properly compress webpack chunks?

I am already building a working web-app with a configuration that has gzip compression deactivated. I use the HtmlWebpackPlugin to inject Vue stuff and generated chunks (js and css) into the main index.html. The chunks are created by the splitChunks…
ElectRocnic
  • 1,275
  • 1
  • 14
  • 25
3
votes
2 answers

Webpack Split Chunks Plugin overwriting cacheGroups, regex matching wrong?

I am attempting to use the Webpack 4 Split Chunks Plugin to create multiple vendor bundles. In this case, I want to create one chunk for react/react-dom, and one chunk for react-router/react-router-dom. When cacheGroups only contains react and…
mhatch
  • 4,441
  • 6
  • 36
  • 62
3
votes
2 answers

How to have multiple chunks but a single js file that loads them

I'm trying to setup Webpack, currently not using dev-server and my app is being served by a python backend which has the index.html. I'm trying to use the SplitChunksPlugin so that I can have multiple chunks (app, vendor, runtime, etc). However, to…
donzul
  • 405
  • 1
  • 4
  • 13
2
votes
1 answer

How to load split chunks in angular production?

I am using custom webpack configuration in my angular 8 project to split my each npm package into separate chunks. When i am uploading the dist folder on my aws server the browser is not fetching the split chunks. Does anyone has a solution for…
Prerna Kakria
  • 67
  • 6
2
votes
0 answers

Webpack building assets with invalid JS syntax

For some reason webpack suddenly started building assets with invalid syntax in our pipeline. Two examples of cases when this happens: First case Expected output in chunk: ... 58521: function(t, n, r) { var e = r(15387), o = r(19220), u =…
aapzu
  • 111
  • 4
2
votes
0 answers

vue.config.js shows different chunks and size in production build

I've upgraded my application from webpack to vue-cli@4.5.17. But, I'm getting different size and different numbers of chunk in production build output. vue.config.js 'use strict' const path = require('path') const defaultSettings =…
Dipen Chand
  • 95
  • 11
2
votes
0 answers

Shared common imports in Webpack4 splitChunks

I'm using webpack splitChunks to code split my reactjs application. There are two components and which are loaded lazy using React.lazy. Below is my build from webpack 913.38 KB …
Ramji
  • 53
  • 2
  • 8
2
votes
1 answer

chunks.some is not a function

I have just upgraded from webpack 4 to webpack 5 but now when I try to build my solution, it's throwing the following error: TypeError: chunks.some is not a function This is the line in my webpack.config: optimization: { splitChunks: { …
Pete
  • 57,112
  • 28
  • 117
  • 166
2
votes
1 answer

How to use ChunkGraph API in webpack 5. splitchunks.cacheGroup?

In webpack4: splitChunks: { cacheGroups: { a: { test: (module, chunks)=>{ chunks.every(( chunk ) => { chunk.name === 'xxx' }) } } }, } In webpack 5: splitChunks: { cacheGroups: { a: { test: (module,…
duolaf
  • 21
  • 2
2
votes
0 answers

How to link chunks created by webpack in Laravel blade file

I have a large app.js and vendor.js file and to reduce the size I chose method of splitting them in chunks. when I run the webpack, it creates many chunked files but I don't know how to import them on blade layout. I tried researching about it on…
Pankaj Jha
  • 886
  • 15
  • 37
2
votes
0 answers

How to put entry name in chunk filename? (webpack)

My files: page1.js import nameFunction from "./nameHelper" page2.js import nameFunction from "./nameHelper" import users from "./users" page3.js import users from "./users" What I get: │ package.json │ page1.html │ …
UserLuke
  • 177
  • 13
2
votes
0 answers

The global variable is not defined after Splitchunks

I'm applying the SplitChunksPlugin of webpack into my service. Like, ... optimization: { splitChunks: { chunks: 'all' } } And some issues came up. Before talking about the issues, I'll tell the minified structure of my service. The web…
wallah
  • 1,964
  • 5
  • 27
  • 48
2
votes
1 answer

Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported module

I have a project that looks like this: app.js module1.js node_modules module1 is imported dynamically in app.js via import(/* webpackChunkName: 'module1' */ '@path'). I'm trying to configure the splitChunks plugin so it would output: app chunk…
vldmr
  • 103
  • 7
2
votes
1 answer

Prevent Webpack SplitChunksPlugin from generating CSS files

I use SplitChunksPlugin to move all vendor JS from vendor/ and node_modules/ folders into a separate file: splitChunks: { cacheGroups: { vendor: { test: /[\\/](vendor|node_modules)[\\/]/, name: 'vendor', …
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
1 2
3
4 5 6 7 8