insin / nwb

A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
Other
5.57k stars 331 forks source link

Feature: Use DllPlugin for fast dev builds #239

Open wmertens opened 7 years ago

wmertens commented 7 years ago

This issue is a:

With the DllPlugin, you can pre-build all your unchanging modules, and tell WebPack to skip evaluating those while building. You then provide the dll bundle and the actual bundle to the browser and it works as normally.

It makes dev reloads much faster, because webpack doesn't have to evaluate most of the code making up the app, and the browser already has the dll bundle cached on every reload.

Obviously, you can't use tree shaking on the build, which is why this is better suited for dev only.

Here's how react-boilerplate did it: https://github.com/mxstbr/react-boilerplate/commit/3f96e10d232f0f22f5f00a7813d217b7ce2bddb5

The biggest problem is deciding which modules to bundle. In my project, I decided to just go with a manually maintained whitelist. Bundling random Node modules breaks in various ways, from missing Node libs to weird require logic and invalid js files. Maybe this can be made to work anyway by ignoring any module that failed to bundle? Maintaining the whitelist is easy though, just copy your deps from package.json and then filter for web modules.

viankakrisna commented 7 years ago

how about adding an entry point for DLL? I've done it like this in this CRA PR https://github.com/facebookincubator/create-react-app/pull/1651/files So we bundle any import in src/index.dll.js