Webpack 代码拆分 - 通过请求单个块自动加载所有块？

Question

. Answers to this question are eligible for a +50 reputation bounty. Kyryl Stronko wants to to this question.

I'm using Webpack 4.x and have the following in my config:

splitChunks: {
    chunks: 'all',
},
runtimeChunk: true

This results in three chunks in my project:

• app.prod.js
• 1.app.prod.js
• 2.app.prod.js

I'd like to load all three scripts using just one initial request. The reason for this is that I'd like to use the "preload" feature in Electron for security reasons, which accepts a single script.

Is there a way to have the initial app.prod.js require/import the additional chunks automatically?

Answer 1

Webpack will automatically split chunks based on these conditions:

• New chunk can be shared OR modules are from the node_modules folder
• New chunk would be bigger than 20kb (before min+gz)
• Maximum number of parallel requests when loading chunks on demand would be lower or equal to 30
• Maximum number of parallel requests at initial page load would be lower or equal to 30

When trying to fulfill the last two conditions, bigger chunks are preferred.

So check the size of the chunks and raise it if you need to generate only one chunk.

splitChunks: {
  chunks: 'async',
  minSize: 35000,    // => HERE      Raise minSize of Chunk
}

I Hope that works

Answer 2

It is not possible to automatically load all chunks by requesting a single chunk using Webpack. Chunks are created and loaded independently, and each chunk must be explicitly requested using the import() function.

If you want to load all of the chunks in your application using a single request, you could consider bundling all of your code into a single file using the optimization.concatenateModules option in Webpack. This will allow you to create a single file that contains all of your code, which you can then load using a single request.

module.exports = {
  // Other options...
  optimization: {
    concatenateModules: true
  }
};

Answer 3

Yes, you can use the import() function to dynamically import additional chunks in your initial script.

Here's an example of how you can do this:

import(/* webpackChunkName: "chunk-1" */ './chunk-1').then(({ default: chunk1 }) => {
  // Use chunk1 here
 });

import(/* webpackChunkName: "chunk-2" */ './chunk-2').then(({ default: chunk2 }) => {
  // Use chunk2 here
});

You can also use the async/await syntax to make the code look cleaner:

async function importChunks() {
  const chunk1 = await import(/* webpackChunkName: "chunk-1" */ './chunk-1');
  const chunk2 = await import(/* webpackChunkName: "chunk-2" */ './chunk-2');

  // Use chunk1 and chunk2 here
}

Note that the webpackChunkName comment is optional, but it can be useful for giving the chunk a more descriptive name in the output.