Bake-in support for webpack DLLs #1201
Prev
Previous commit
Allow usage of webpack DLLs during development
One can now benefit from more build-time speed-ups by pre-compiling
vendor libraries into a DLL. To compile the DLL:
npm run build-dlls
To use the DLL:
export WEBPACK_DLLS=1 npm run dev
What isn't done:
- cache busting
- webpack isomorphic tools integration (if it's needed anyway, I don't
use it/know it)- Loading branch information
commit d5f6f12986aac10a87e90d787b20fabcdd5acf15
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,3 +6,4 @@ webpack-assets.json | |
| webpack-stats.json | ||
| npm-debug.log | ||
| /.happypack | ||
| /webpack/dlls/manifests/*.json | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # DLLs | ||
|
|
||
| Webpack "DLLs" can help reduce the build times a bit which is rather useful | ||
| during development. | ||
|
|
||
| You may opt-in to use the Vendor DLL by doing the following: | ||
|
|
||
| - set `WEBPACK_DLLS=1` in your shell before running webpack | ||
| - compile the DLL using `npm run build-dlls` | ||
|
|
||
| You need to be careful to re-compile the DLL anytime a vendor module changes | ||
| (which is not often.) | ||
|
|
||
| ## Defining a new DLL | ||
|
|
||
| See the `vendor` DLL under `/webpack/dlls/vendor/webpack.config.js` for | ||
| pointers on how to create one. Here are the guidelines: | ||
|
|
||
| - the DLL definition goes under `/webpack/dlls/[name]/webpack.config.js` | ||
| - the JS bundle goes under `/static/dist/dlls` with the name `dll__[name].js` | ||
| - the compiled manifest (auto-generated) goes under `/webpack/dlls/manifests` | ||
| with the name `[name].json` | ||
| - a reference to the DLL should be registered in `/webpack/dev.config.js` | ||
| - the build script `build-dlls` defined in `package.json` must be adjusted to compile that DLL | ||
| - the component `src/helpers/Html.js` should include the JS bundle | ||
| - `karma.conf.js` should preload the JS bundle under `files` | ||
|
|
||
| ## Adding modules to the Vendor DLL | ||
|
|
||
| If you add a new dependency that you want to freeze within the DLL, add it | ||
| to `/webpack/dlls/vendor/webpack.config.js` under `entry.vendor`. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Files in this directory are auto-generated. DO NOT EDIT! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| var path = require('path'); | ||
| var webpack = require('webpack'); | ||
| var root = path.resolve(__dirname, '..', '..', '..'); | ||
|
|
||
| module.exports = { | ||
| devtool: process.env.NODE_ENV === 'production' ? null : 'inline-source-map', | ||
|
|
||
| output: { | ||
| path: path.join(root, 'static/dist/dlls'), | ||
| filename: 'dll__[name].js', | ||
| library: 'DLL_[name]_[hash]' | ||
| }, | ||
|
|
||
| entry: { | ||
| vendor: [ | ||
| 'babel-polyfill', | ||
|
|
||
| // <babel-runtime> | ||
| // | ||
| // Generate this list using the following command against the stdout of | ||
| // webpack running against the source bundle config (dev/prod.js): | ||
| // | ||
| // egrep -o 'babel-runtime/\S+' | sed 's/\.js$//' | sort | uniq | wc -l | ||
|
There was a problem hiding this comment. This should be amended to include the full command to avoid the confusion (see main thread for context): webpack \
--config ./webpack/dev.config.js \
--display-modules | egrep -o 'babel-runtime/\S+' | sed 's/\.js$//' | sort | uniq |
||
| 'babel-runtime/core-js/array/from', | ||
| 'babel-runtime/core-js/get-iterator', | ||
| 'babel-runtime/core-js/is-iterable', | ||
| 'babel-runtime/core-js/json/stringify', | ||
| 'babel-runtime/core-js/number/is-integer', | ||
| 'babel-runtime/core-js/number/is-safe-integer', | ||
| 'babel-runtime/core-js/object/define-property', | ||
| 'babel-runtime/core-js/object/get-own-property-descriptor', | ||
| 'babel-runtime/core-js/object/get-own-property-names', | ||
| 'babel-runtime/core-js/object/get-prototype-of', | ||
| 'babel-runtime/core-js/promise', | ||
| 'babel-runtime/helpers/create-class', | ||
| 'babel-runtime/helpers/createClass', | ||
| 'babel-runtime/helpers/defineProperty', | ||
| 'babel-runtime/helpers/get', | ||
| 'babel-runtime/helpers/possibleConstructorReturn', | ||
| 'babel-runtime/helpers/slicedToArray', | ||
| 'babel-runtime/helpers/to-consumable-array', | ||
| 'babel-runtime/helpers/toConsumableArray', | ||
| // </babel-runtime> | ||
|
|
||
| 'invariant', | ||
| 'multireducer', | ||
| 'react', | ||
| 'react-bootstrap', | ||
| 'react-dom', | ||
| 'react-helmet', | ||
| 'react-inline-css', | ||
| 'react-redux', | ||
| 'react-router', | ||
| 'react-router-bootstrap', | ||
| 'react-router-redux', | ||
| 'redux', | ||
| 'redux-async-connect', | ||
| 'redux-form', | ||
| 'scroll-behavior', | ||
| 'serialize-javascript', | ||
| 'socket.io-client', | ||
| 'superagent', | ||
| 'warning', | ||
| ] | ||
| }, | ||
|
|
||
| resolve: { | ||
| root: path.resolve(root, 'node_modules'), | ||
| extensions: [ '', '.js' ], | ||
| postfixes: [], | ||
| }, | ||
|
|
||
| plugins: [ | ||
| new webpack.DefinePlugin({ | ||
| 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), | ||
| }), | ||
|
|
||
| new webpack.DllPlugin({ | ||
| path: path.join(root, 'webpack/dlls/manifests/[name].json'), | ||
| name: 'DLL_[name]_[hash]' | ||
| }) | ||
| ] | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| var path = require('path'); | ||
| var root = path.resolve(__dirname, '..'); | ||
| var webpack = require('webpack'); | ||
|
|
||
| exports.installVendorDLL = function(config, dllName) { | ||
| // DLL shizzle. Read more about this in /webpack/dlls/README.md | ||
| if (process.env.WEBPACK_DLLS === '1') { | ||
|
There was a problem hiding this comment. This if statement is redundant at least in this specific use case because the calling code does the same check |
||
| var manifest = loadDLLManifest(path.join(root, 'webpack/dlls/manifests/' + dllName + '.json')); | ||
|
|
||
| if (manifest) { | ||
| console.warn('Webpack: will be using the "%s" DLL.', dllName); | ||
|
There was a problem hiding this comment. Any particular reason this is a warning instead of a log? |
||
|
|
||
| config.plugins.push(new webpack.DllReferencePlugin({ | ||
| context: root, | ||
| manifest: manifest | ||
|
There was a problem hiding this comment. I'm a little confused about this - can't manifest just be a string path to the file? Do you do this just to ensure the DLL exists before hand? There was a problem hiding this comment. I think it's what webpack expects; an object (the manifest) and not a path to where a manifest could be found. I could be wrong though. There was a problem hiding this comment. oh, my bad, you're right, I misread my own code |
||
| })); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| function loadDLLManifest(filePath) { | ||
| try { | ||
| return require(filePath); | ||
| } | ||
| catch(e) { | ||
| process.env.WEBPACK_DLLS = '0'; | ||
|
|
||
| console.error( | ||
| function() {/* | ||
| ======================================================================== | ||
| Environment Error | ||
| ------------------------------------------------------------------------ | ||
| You have requested to use webpack DLLs (env var WEBPACK_DLLS=1) but a | ||
| manifest could not be found. This likely means you have forgotten to | ||
| build the DLLs. | ||
|
|
||
| You can do that by running: | ||
|
|
||
| npm run build-dlls | ||
|
|
||
| The request to use DLLs for this build will be ignored. | ||
| */}.toString().slice(15,-4) | ||
| ); | ||
| } | ||
|
|
||
| return undefined; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a little ambiguous, am I supposed to run
WEBPACK_DLLS=1 npm run dev? Is it only for development? Should there be specific npm tasks for running webpack with this env set?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You don't need the flag when you're building using
npm run build-dllsbut you do need it set to use the DLLs, which isnpm run devand friends.I personally think DLLs should only be used during development and had outlined my reasons in the main thread but it's not necessarily a must. I just don't see a gain in using it in a production environment as the prod build is already expected to be slow and doesn't run nearly as often as the dev one so.