如果超过特定文件大小限制，如何创建更多的 javascript 块？

Question

Is there any way that I can automate further chunking of javascript file if it exceeds from a defined file size limit.

To explain the problem further. Lets just say I have different modules "product landing page(plp)" & "product detail page(pdp)". Both has different JS files already ("plp.js 60kb " and "pdp.js 55kb " accordingly).

* How can the files be chunkified further if it exceed from certain file size limit? *

So the expected output when the limit is set as 50kb should be...

plp-1.js `50kb`
plp-2.js `10kb~`

pdp-1.js `50kb`
pdp-2.js` `5kb~`

Answer 1

You can specify entry points in you webpack.config.js file:

entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },

It will create a new chunk output:

            Asset     Size   Chunks             Chunk Names
another.bundle.js  550 KiB  another  [emitted]  another
  index.bundle.js  550 KiB    index  [emitted]  index
Entrypoint index = index.bundle.js
Entrypoint another = another.bundle.js

See docs here: https://webpack.js.org/guides/code-splitting/