为每个 html（表单）生成单独的 bundle.js

Question

I'm currently working on a react SPA project, where I have to make several forms with logic. Every form has same components and some unique as well. Now: When the client pick one of the forms, it will use the big common bundle.js.

Question: Is there a solution for wrapping bundle.js each (webpage) form?

Because there are several common components I don't want to make a project for each forms, but I'm thinking of thiner bundle.js files.

Thanks for the advises in advance!

Answer 1

It is indeed possible to generate separate bundles for each page by using the dynamic import function and Webpack.

I would highly recommend using react-loadable ( https://github.com/jamiebuilds/react-loadable ) to deal with all the logic around that because there are a bunch of gotchas that you'll have to be aware of (like making sure you have all the bundles ready and loaded before rendering on the client. Or making sure you even know what those modules are)

The next problem you might have though is that even though the bundles are now smaller, the common bits are in every single bundle. So if users go to multiple URLs they have to download that multiple times.

Here you have 2 options:

• Either configure your CommonsChunkPlugin in Webpack to have a commons module with modules shared over more than x bundles. A great introduction is here: ( https://medium.com/webpack/webpack-bits-getting-the-most-out-of-the-commonschunkplugin-ab389e5f318 ).
• Or you wait a couple more weeks until Webpack 4 is out. They should have a plugin that does all that automagically for you. ( https://github.com/webpack/webpack/milestone/15 ). If you can't wait, there are alphas out already, must be going to betas soon.