Webpack generates separate chunks for each `require` and static `import` in split points

[alexnoz]

Webpack generates extraneous chunks for each module (be it image, stylesheet, js module, etc.) that is imported via static import or require, only in split points.

Here is the Home component:

const Home = () => (
  <div>
    <h2>React boilerplate</h2>
    <h3>Progressive Web App, Code Splitting, Server-Side Rendering, Hot Reloading</h3>

    {/* This `svg` ends up being in a separate chunk */}
    <img src={require('./js-logo.svg')} width='200' alt='js logo' />
  </div>
)

It's a lazy-loaded route that bundles together with the js-logo.svg (highlighted):

But along with that, the js-logo.svg goes into a separate module as well:

Here is the Login component:

// The `login.scss` module ends up being in a separate chunk
import './login.scss'

const Login = () => (
  <div styleName='wrapper'>
    <h2 styleName='heading'>Hey, I'am a dynamically loaded form</h2>
    <form action='/' styleName='form'>
      <label htmlFor='name' styleName='label'>Name</label>
      <input id='name' type='text' styleName='input' name='name' placeholder='Your name...' />
      <label htmlFor='email' styleName='label'>Email</label>
      <input id='email' type='email' styleName='input' name='name' placeholder='Your email...' />
      <button type='submit' styleName='submit'>Submit</button>
    </form>
  </div>
)

It's a lazy-loaded component (not a route), here it's bundled together with the login.scss (highlighted):

And here the login.scss in a separate bundle:

When I just remove these extra chunks from the build folder manually, everything works fine, but potentially there can be a lot of assets required/imported in split points. It's possible to write a script that will remove the chunks, but webpack's manifest and the server bundle still contain some info about them (ids, hashes, etc), so it is not optimal. I guess, the only way to fix this is to make webpack ignore these files somehow.

[bebraw]

Hi, have you seen @faceyspacey's approach? Here's a demo. He essentially solved SSR+HMR.

[alexnoz]

Hi, thanks for the response. Yeah, I've seen that, it's pretty cool. Well, I'am reinventing the wheel here :stuck_out_tongue_winking_eye:, I'am pretty close, actually. It seems like webpack treats all modules imported in split points as dynamic chunks. I thought, maybe you know if there is a way to prevent this behaviour?

[bebraw]

Maybe it's the lazy import mode you need. More here.