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

Webpack chunk path breaks from 3.8.1 -> 4.43.0

I'm working on upgrading an inherited Webpack configuration from v.3.8.1 to v4.43.0, and I'm running into an odd issue with asynchronously loaded chunk files in the latest version. My Webpack output directory structure looks like this: -…
0
votes
0 answers

Webpack SplitChunks not generating vendor chunks while using nodeExternals

The following config cannot generate commons chunk if it uses nodeExternals, my question is how to chunk vendor codes while using nodeExternals? webpack.config.js const nodeExternals = require('webpack-node-externals'); module.exports = { name:…
yuyicman
  • 95
  • 1
  • 8
0
votes
1 answer

Query in webpack

I am trying to make a library (using typescript and webpack). The library is intended to be used by different angular applications. Every application may not consume same set of functionalities and thus the library is split into multiple ones (for…
0
votes
1 answer

How to separate a specified file using webpack in vue-cli project

I have a config file (config.js), which depends on two files: local.js(for development environment) and deploy.js(for production environment). After run serve or run build, it will create some configurations rely on the environment. I used it like…
sknight
  • 1,063
  • 11
  • 15
0
votes
1 answer

Difference between splitChunks.chunks and splitChunks.test (webpack)

Can anyone explain to me the difference between the splitChunks.chunks setting and the splitChunks.cacheGroups.{cacheGroup}.test setting in Webpack's SplitChunksPlugin? Especially if they're both used in a single cache group. The documentation isn't…
Fabis
  • 1,932
  • 2
  • 20
  • 37
0
votes
1 answer

How to split webpack entries without generating new chunks with webpack

I need to do the following with webpack 4: entry: common.js, one.js, two.js output: common.bundle.js, one.bundle.js, two.bundle.js where: common.js: contains common features one.js: depends on common.js two.js: depends on one.js and…
Antoni
  • 41
  • 1
  • 5
0
votes
1 answer

Webpack 4 - Splitchunks

I have set chunks : 'all' in split chunks. But my js is compiled but it not rendering. Where should I include the chunk file. Can it be achieved without HTMLWebpackPlugin ? optimization: { splitChunks: { cacheGroups: { …
0
votes
1 answer

Multiple Webpack bundles override function names?

I have two Webpack bundles integrated into site. I added chunks: ‘initial’ to optimization in both projects and each bundle works isolated. However, chunks from both projects seem to overwrite global functions, which leads to errors like: “n is not…
Flo
  • 187
  • 2
  • 12
0
votes
1 answer

Vendor chunk is included only in the first html file when using html-webpack-plugin

I would like to set up a webpack 4 configuration for production which is using html-webpack-plugin to create multiple html files. In the same time, I would like to extract my vendor libs as separate chuncks, and manually set up which html file uses…
0
votes
1 answer

How to create multiple vendor modules with splitChunks

I have an app with an admin and frontend module. The admin environment is has a single react-router entry point and I don't care too much about chunking here. The front end needs chunking. Every approach I see uses a node_modules based vendor chunk.…
Marc
  • 6,773
  • 10
  • 44
  • 68
0
votes
1 answer

Webpack 4 SplitChunksPlugin - Common dependencies in Dynamic Imports

I'm using Dynamic imports with Webpack, as per the documentation: https://webpack.js.org/guides/code-splitting/#dynamic-imports Very basic example (not actual code): // main.js import('./moduleA).then((moduleA) => { …
0
votes
0 answers

Limit the number of chunks in Webpack 4

I'm splitting my single page app by means of dynamic imports. I want all of them to be bundled within a single extra file other than the main bundle. Which means, I would end up with something like: app.e82eb13a2342391fab679.js - main…
Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
0
votes
1 answer

HOWTO control webpack4 bundle chunks

What seems simple is not clicking for me... I'm trying to create three separate bundles: (1) node-vendors-[hash].bundle.js: bundle of stuff from node_modules (2) vendor-config-[hash].bundle.js: bundle of all scripts provided by vendors we use our…
Andrew Connell
  • 4,939
  • 5
  • 30
  • 42
0
votes
1 answer

How to best optimize initial page load for react web app with images especially for mobile?

I have a fairly complex web app written in React/Redux and webpack for compilation. Its landing page consists of 2 images and the main app module. All the other modules are lazy-loaded depending on what the user wants to do. When I audit using…
Coco
  • 1,550
  • 3
  • 24
  • 43
0
votes
1 answer

SplitChunks shared modules are loaded async

I'm trying to figure out how to configure Webpack 4's SplitChunks plugin. If I allow it to put modules in a shared/common chunk, it seems those modules are loaded async. entry.js: require("expose-loader?$!jquery"); This is included in the…
Webberig
  • 2,746
  • 1
  • 23
  • 19
1 2 3 4 5 6 7
8