Consider using DllPlugin

http://engineering.invisionapp.com/post/optimizing-webpack/ https://robertknight.github.io/posts/webpack-dll-plugins/

I don’t quite understand how to integrate it, and community help would be most welcome. It would be ideal if we could make both dev and prod builds faster.

The idea is that we’d only use it for react and react-dom.

[ro-savage]

@gaearon I implemented this in my own (large) project and in create-react-app.

On my own project it took our rebuild times from ~4000ms to ~1000ms.

However in the CRA which basically just has React in the DLL the difference is alot smaller.

Stats

Commit	First build	second build	Rebuild 1	Rebuild 2	Rebuild 3	File 2	File 2 RB
PreDLL	4335ms	4413ms	666ms	322ms	598ms	563ms	353ms
PostDLL	2611ms	2752ms	220ms	183ms	144ms	193ms	313ms

Added complexity

Creating DLL package list The list of node modules to for the DLL can either be automatically generated from the package.json (ala react-boilerplate) or manually added to an array. Automatically going through the package.json makes it easier but I found some packages (react-toolbox) can break the dll build (due to importing of sass files). Manually the user knows what is going in the DLL but has to remember to add files to the array when they add new node_modules (but they know what packages make up the dll). Any missed files just go into the regular bundle.

Weird webpack stuff DLL’s aren’t used by many project. When you eject and see it, it might be confusing (although my implementation is much simpler than react-boilerplate). It also needs to be run on any update to the node_modules (I believe it can be ran as postinstall)

Reliability React-boilerplate is the only large project I know of using DLLs. It should be getting a lot of user testing now, but as of this moment its largely untested in real world apps.

Worth adding?

I don’t have much of an answer if it’s worth adding. The ‘feeling’ between the two rather minimal as is. However if CRA is used for something containin 10+ node_modules, the difference might be much larger.

Large CRA example

Example with larger CRA (imports: redux, react-redux, lodash, react-bootstrap, immutable, redux-saga, reselect, babel-polyfill, react-router. No other changes)

Commit	First build	second build	Rebuild 1	Rebuild 2	Rebuild 3	File 2	File 2 RB
PreDLL	6801ms	7536ms	1489ms	1192ms	816ms	1248ms	1226ms
PostDLL	2965ms	2202ms	633ms	145ms	222ms	230ms	241ms

[asfktz]

I am so excited about this!

After seeing @ro-savage’s Stats, I had to try it for myself. I was so impressed by it. I realized that I really-really want it to be there the next time I build something with CRA.

So, I decided to make a PR.

I wanted to Add the DllPlugin to CRA without introducing new files, I liked the cleanness of the source code and didn’t wanted to mess it with all the DllPlugin’s Boilerplate.

The main challenges was that:

1. The DLL has to have its own config
2. The DLL must be built ahead of time. Otherwise, the DllReferencePlugin won’t be able to find the DLL’s manifest.
3. The DLL bundle needs to be injected to index.html before the main one, but only in development mode.
4. The DLL needs to be rebuilt every time a node module is added or removed. but also stored in a cache, to prevent unnecessary build.
5. The user should be able to easily choose what modules are included in the DLL, ideally from his package.json

Those constraints led to many iterations over this PR, until one night I realized that the most declarative and minimalist form to add DLL Support to CRA is by creating a new webpack plugin that encapsulates all that logic.

You just add it to webpack.config.dev.js as usual, tell it which modules you want to move to the DLL and that’s it.

Now, when you run webpack for the first time, It creates a separate compiler that builds the DLLs, stores them in a cache directory, and load them into the memory so webpack’s dev server can consume them later.

Then, it connects with the HTMLPlugin to injects the DLL bundles before the main one.

The next time you run webpack, it will read the DLLs from the cache, to skip unnecessary build, unless node_modules changed or if the plugin’s settings are different from the last build.

The more I worked on the Plugin, the more I realized that there’s nothing specific to CRA about it, and that this plugin can serve many other webpacks configurations, so I extracted the code into a separate repository and called it AutoDllPlugin.

This PR is now included only 2 changes: It adds a plugin to webpack.config.dev.js and another dependency to react-script’s package.json

The way to use it is by adding the dll entries in the packge.json, like so:

{
  "name": "closed-cra-dll-test",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "dll": {
    "entry": {
      "vendor": [
        "react",
        "react-dom"
      ]
    }
  }
}

Only ./polyfills are included by default. I left ‘react’ and ‘react-dom’ intentionally, in case someone we’ll want to use CRA to work on one of them.

That’s it. It was a really incredible journey for me to make this plugin. I hope you’ll like it.