ctrlplusb / react-universally

A starter kit for universal react applications.
MIT License
1.69k stars 243 forks source link

Allow to manually add modules for DllPlugin #257

Closed enten closed 7 years ago

enten commented 7 years ago

@ctrlplusb

I think we must enhance the dll's vendor by allowing to manually include modules.

The main purpose is to be able to manually add modules in the dll to reduce re-compilation times of the client bundle.

Related to enten/tension#9 Commits 0c137387, 89a7b5a8 and aeeac540 add that enhancement in tension

With this enhancement I reduce by 50% the re-compilation times of my client bundle by manually add core-js polyfill files (imported by babel-polyfill) and intl /react-intl translation files.

Context

I encountered huge re-compilation times caused by usage of babel-polyfill and react-intl (and intl).

The current modules detection (which will be passed to the DllPlugin) can't (and shouldn't) caught all imports which may be include in the dll.

So we need an option to manually add modules in the dll to reduce re-compilation times.

Proposal

I suggest a new devVendorDLL's option (in config/private/project.js) called includes.

This option receive an array of files path patterns. These patterns will be resolved (only if it contains joker "*" char, else it's not a pattern but just a file path) and merge to modules paths in buildVendorDLL().

Use case example

devVendorDLL: {
  enabled: true,
  // ...
  includes: [
    'fbjs',
    'intl/locale-data/jsonp/*.js'
  ]
}

In the example above:

So, the includes declarations above will be resolved into:

[
  "fbjs",
  "intl/locale-data/jsonp/af.js",
  "intl/locale-data/jsonp/af.-NA.s", 
  "intl/locale-data/jsonp/af.-ZA.s", 
   // ...
]
ctrlplusb commented 7 years ago

Some amazing insights and advice here @enten - you are super helpful yet again. I really appreciate you taking the time to post this issue.

strues commented 7 years ago

We could use something similar to how msbtr's react-boilerplate uses the DLL Plugin.

https://github.com/mxstbr/react-boilerplate/blob/master/internals/config.js https://github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.dll.babel.js

Everything for the DLL's is pulled via what's in the package.json and additional includes that you manually add, such as core-js

strues commented 7 years ago

My plan is to to tackle the aforementioned DLL modification today.

ctrlplusb commented 7 years ago

Awesome @strues - just saw this now. Looks like a great move!

Always up for anything that is simpler and/or less magical. :)

strues commented 7 years ago

PoC is working. Allows both inclusion / exclusion. Also removes a lot of vendorDLL code.

ctrlplusb commented 7 years ago

Staged.