0

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 bundle
  • 0.c399423423532432c1da433.js - all the code-splitted chunks in a single bundle

In my Webpack 2 configuration, I accomplish it with this config:

plugins: [
  new CommonsChunkPlugin({
    names: ['app'],
    children: true,
    async: true,
  }),
  new LimitChunkCountPlugin({
    maxChunks: 3
  }),
]

In Webpack 4, I tried limiting the extra chunks to 1 using this config:

optimization: {
  splitChunks: {
    chunks: 'async',
    minSize: 100000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 1,
    maxInitialRequests: 1,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
    }
  }
}

But I still end up with unwanted extra chunks:

 2.c99478cc68a70c1da433.js   1.97 MiB       2  [emitted]  [big]  
 3.913a2df562e62d9338e3.js   1.56 MiB       3  [emitted]  [big]  
 4.4acc069c6a8aa5662198.js     48 KiB       4  [emitted]         
 app.e82eb13a526791fab679.js   1.31 MiB     0  [emitted]  [big]  app
Daniel Birowsky Popeski
  • 8,752
  • 12
  • 60
  • 125
  • dynamic loading will always generate 1 chunk per import statement, you cannot modify that, otherwise dynamic import/code splitting would be useless. – PlayMa256 Dec 01 '18 at 22:36
  • @PlayMa256 "dynamic loading will always generate 1 chunk per import statement" - resource please. "otherwise dynamic import/code splitting would be useless" - Not true. – Daniel Birowsky Popeski Dec 01 '18 at 23:06
  • yes it would. Personal experience and from webpack website, just read the definition. You are misunderstanding what it is all about – PlayMa256 Dec 01 '18 at 23:22
  • what code splitting would be useful, if just generated 1 chunk? The name says everything, SPLITTING – PlayMa256 Dec 01 '18 at 23:24
  • You could use a cache group to put everything that matchs a pattern on a chunk. Doing dynamic import you won't be able to achieve it. – PlayMa256 Dec 01 '18 at 23:27
  • @PlayMa256 sir, please try to understand the question, it clearly states the goal is to end up with two bundles, and not one. – Daniel Birowsky Popeski Dec 01 '18 at 23:29
  • Suppose you do Server Side Rendering. For the Client you most definitely want code splitting (irrelevant of SSR or not). But for the Server, for the exact same code, you want the complete opposite: you do not want many promises. Especially not sporadic ones, added by webpack in places hard to control. – Alin Galatan Oct 30 '20 at 03:57

0 Answers0