[DDW-981] Speedup storybook builds in development (#1607)

* [DDW-980] Speedup storybook build performance in development * [DDW-981] Add changelog entry * [DDW-981] Use storybook webpack caching in development
input-output-hk · Oct 21, 2019 · a9103ad · a9103ad
1 parent b3292f6
commit a9103ad
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ Changelog
 
 ### Chores
 
+- Speedup storybook builds in development ([PR 1607](https://github.com/input-output-hk/daedalus/pull/1607))
 - Added note to UTXO screen showing pending transactions ([PR 1589](https://github.com/input-output-hk/daedalus/pull/1589))
 - Fixed broken source maps ([PR 1594](https://github.com/input-output-hk/daedalus/pull/1594))
 - Reorganized Storybook by domain ([PR 1537](https://github.com/input-output-hk/daedalus/pull/1537))

diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
@@ -1,11 +1,67 @@
+const AutoDllPlugin = require('autodll-webpack-plugin');
+
 const isCi = process.env.CI && process.env.CI !== '';
 
 module.exports = async ({ config }) => {
   const [jsxRule] = config.module.rules;
   jsxRule.use.unshift('thread-loader');
+  // Use Auto DLL plugin for faster development builds
+  if (!isCi) {
+    const [htmlWebpackPlugin] = config.plugins;
+    const { templateParameters } = htmlWebpackPlugin.options;
+    htmlWebpackPlugin.options.templateParameters = (...args) =>
+      Object.assign(templateParameters.call(null, ...args), {
+        dlls: ['./vendor.dll.js'],
+      });
+    config.plugins.push(
+      new AutoDllPlugin({
+        inject: true,
+        filename: 'vendor.dll.js',
+        entry: {
+          vendor: [
+            '@storybook/addon-actions',
+            '@storybook/addon-knobs',
+            '@storybook/addon-links',
+            '@storybook/addon-notes',
+            '@storybook/addons',
+            '@storybook/core',
+            '@storybook/react',
+            'aes-js',
+            'bignumber.js',
+            'bip39',
+            'blakejs',
+            'bs58',
+            'classnames',
+            'es6-error',
+            'faker',
+            'humanize-duration',
+            'lodash',
+            'mobx',
+            'mobx-react',
+            'mobx-react-form',
+            'mobx-react-router',
+            'moment',
+            'pbkdf2',
+            'qrcode.react',
+            'react',
+            'react-copy-to-clipboard',
+            'react-dom',
+            'react-number-format',
+            'react-router',
+            'react-svg-inline',
+            'recharts',
+            'route-parser',
+            'safe-buffer',
+            'unorm',
+            'validator',
+          ],
+        },
+      })
+    );
+  }
   return {
     ...config,
-    cache: false,
+    cache: !isCi,
     devtool: isCi ? 'none' : config.devtool,
     optimization: {
       minimize: false,