Extract common chunks plugin.

js/package-lock.json

@@ -45,13 +45,13 @@
       "dev": true
     },
     "@parity/dapp-dapp-methods": {
-      "version": "github:js-dist-paritytech/dapp-dapp-methods#b649fb9056d49bbf4fde719f91a4cfcaf529f9f6",
+      "version": "github:js-dist-paritytech/dapp-dapp-methods#01dcabc56ecea95cdc87dde81598b7e8469375d6",
       "dev": true,
       "requires": {
         "@parity/api": "2.1.15",
         "@parity/mobx": "1.1.2",
-        "@parity/ui": "3.0.22",
+        "@parity/ui": "3.1.4",
-        "mobx": "3.6.1",
+        "mobx": "3.6.2",
         "mobx-react": "4.3.5",
         "prop-types": "15.6.1",
         "react": "16.2.0",
@@ -79,10 +79,91 @@
             "@parity/shared": "2.2.23"
           }
         },
+        "@parity/ui": {
+          "version": "3.1.4",
+          "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.1.4.tgz",
+          "integrity": "sha512-aG79IOxMBeRsu92Zlq3QsR6Z6PAmlhmOdU9tQP+F9XB/44Y4sGxfSDNucGucWz/Jz0VGerJn53CoACa4Yj5uYA==",
+          "dev": true,
+          "requires": {
+            "@parity/api": "2.1.15",
+            "@parity/etherscan": "2.1.3",
+            "@parity/mobx": "1.1.2",
+            "@parity/shared": "2.2.23",
+            "babel-runtime": "6.26.0",
+            "bignumber.js": "4.1.0",
+            "brace": "0.11.0",
+            "date-difference": "1.0.0",
+            "eventemitter3": "2.0.3",
+            "file-saver": "1.3.3",
+            "geopattern": "1.2.3",
+            "js-sha3": "0.6.1",
+            "keycode": "2.1.9",
+            "lodash": "4.17.4",
+            "moment": "2.19.2",
+            "qrcode-generator": "1.3.1",
+            "react-ace": "5.7.0",
+            "react-copy-to-clipboard": "5.0.1",
+            "react-datetime": "2.11.0",
+            "react-dom": "16.1.1",
+            "react-dropzone": "4.2.3",
+            "react-element-to-jsx-string": "13.1.0",
+            "react-event-listener": "0.5.2",
+            "react-intl": "2.4.0",
+            "react-markdown": "3.0.2",
+            "react-portal": "4.0.0",
+            "react-qr-reader": "2.0.1",
+            "react-redux": "5.0.6",
+            "react-router": "3.2.0",
+            "react-tooltip": "3.4.0",
+            "recharts": "1.0.0-beta.2",
+            "redux": "3.7.2",
+            "semantic-ui-css": "2.2.12",
+            "semantic-ui-react": "0.76.0",
+            "zxcvbn": "4.4.2"
+          },
+          "dependencies": {
+            "react-dom": {
+              "version": "16.1.1",
+              "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.1.1.tgz",
+              "integrity": "sha512-q06jiwST8SEPAMIEkAsu7BgynEZtqF87VrTc70XsW7nxVhWEu2Y4MF5UfxxHQO/mNtQHQWP0YcFxmwm9oMrMaQ==",
+              "dev": true,
+              "requires": {
+                "fbjs": "0.8.16",
+                "loose-envify": "1.3.1",
+                "object-assign": "4.1.1",
+                "prop-types": "15.6.1"
+              }
+            },
+            "semantic-ui-react": {
+              "version": "0.76.0",
+              "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.76.0.tgz",
+              "integrity": "sha512-CdiIT8n7ZwUlytZkYsQMnaVGmoIZI/mVs4lijvLcR568kcnlRkYYaFKhMLq5tFDQU6+QhdTD+8WebF7ov0Ql6Q==",
+              "dev": true,
+              "requires": {
+                "babel-runtime": "6.26.0",
+                "classnames": "2.2.5",
+                "lodash": "4.17.4",
+                "prop-types": "15.6.1"
+              }
+            }
+          }
+        },
+        "bignumber.js": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.1.0.tgz",
+          "integrity": "sha512-eJzYkFYy9L4JzXsbymsFn3p54D+llV27oTQ+ziJG7WFRheJcNZilgVXMG0LoZtlQSKBsJdWtLFqOD0u+U0jZKA==",
+          "dev": true
+        },
+        "js-sha3": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.6.1.tgz",
+          "integrity": "sha1-W4n3enR3Z5h39YxKB1JAk0sflcA=",
+          "dev": true
+        },
         "mobx": {
-          "version": "3.6.1",
+          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
-          "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=",
+          "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==",
           "dev": true
         },
         "prop-types": {
@@ -136,13 +217,12 @@
       }
     },
     "@parity/dapp-dapp-visible": {
-      "version": "github:js-dist-paritytech/dapp-dapp-visible#28546f312ea9877ebeea9c52afea1e7ec943cd0d",
+      "version": "github:js-dist-paritytech/dapp-dapp-visible#14e6499495a3421c4a6da4728b8d99dfa1656e1c",
       "dev": true,
       "requires": {
         "@parity/api": "2.1.15",
-        "@parity/mobx": "1.1.2",
+        "@parity/ui": "3.1.4",
-        "@parity/ui": "3.0.22",
+        "mobx": "3.6.2",
-        "mobx": "3.6.1",
         "mobx-react": "4.3.5",
         "prop-types": "15.6.1",
         "react": "16.2.0",
@@ -170,10 +250,91 @@
             "@parity/shared": "2.2.23"
           }
         },
+        "@parity/ui": {
+          "version": "3.1.4",
+          "resolved": "https://registry.npmjs.org/@parity/ui/-/ui-3.1.4.tgz",
+          "integrity": "sha512-aG79IOxMBeRsu92Zlq3QsR6Z6PAmlhmOdU9tQP+F9XB/44Y4sGxfSDNucGucWz/Jz0VGerJn53CoACa4Yj5uYA==",
+          "dev": true,
+          "requires": {
+            "@parity/api": "2.1.15",
+            "@parity/etherscan": "2.1.3",
+            "@parity/mobx": "1.1.2",
+            "@parity/shared": "2.2.23",
+            "babel-runtime": "6.26.0",
+            "bignumber.js": "4.1.0",
+            "brace": "0.11.0",
+            "date-difference": "1.0.0",
+            "eventemitter3": "2.0.3",
+            "file-saver": "1.3.3",
+            "geopattern": "1.2.3",
+            "js-sha3": "0.6.1",
+            "keycode": "2.1.9",
+            "lodash": "4.17.4",
+            "moment": "2.19.2",
+            "qrcode-generator": "1.3.1",
+            "react-ace": "5.7.0",
+            "react-copy-to-clipboard": "5.0.1",
+            "react-datetime": "2.11.0",
+            "react-dom": "16.1.1",
+            "react-dropzone": "4.2.3",
+            "react-element-to-jsx-string": "13.1.0",
+            "react-event-listener": "0.5.2",
+            "react-intl": "2.4.0",
+            "react-markdown": "3.0.2",
+            "react-portal": "4.0.0",
+            "react-qr-reader": "2.0.1",
+            "react-redux": "5.0.6",
+            "react-router": "3.2.0",
+            "react-tooltip": "3.4.0",
+            "recharts": "1.0.0-beta.2",
+            "redux": "3.7.2",
+            "semantic-ui-css": "2.2.12",
+            "semantic-ui-react": "0.76.0",
+            "zxcvbn": "4.4.2"
+          },
+          "dependencies": {
+            "react-dom": {
+              "version": "16.1.1",
+              "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.1.1.tgz",
+              "integrity": "sha512-q06jiwST8SEPAMIEkAsu7BgynEZtqF87VrTc70XsW7nxVhWEu2Y4MF5UfxxHQO/mNtQHQWP0YcFxmwm9oMrMaQ==",
+              "dev": true,
+              "requires": {
+                "fbjs": "0.8.16",
+                "loose-envify": "1.3.1",
+                "object-assign": "4.1.1",
+                "prop-types": "15.6.1"
+              }
+            },
+            "semantic-ui-react": {
+              "version": "0.76.0",
+              "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.76.0.tgz",
+              "integrity": "sha512-CdiIT8n7ZwUlytZkYsQMnaVGmoIZI/mVs4lijvLcR568kcnlRkYYaFKhMLq5tFDQU6+QhdTD+8WebF7ov0Ql6Q==",
+              "dev": true,
+              "requires": {
+                "babel-runtime": "6.26.0",
+                "classnames": "2.2.5",
+                "lodash": "4.17.4",
+                "prop-types": "15.6.1"
+              }
+            }
+          }
+        },
+        "bignumber.js": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.1.0.tgz",
+          "integrity": "sha512-eJzYkFYy9L4JzXsbymsFn3p54D+llV27oTQ+ziJG7WFRheJcNZilgVXMG0LoZtlQSKBsJdWtLFqOD0u+U0jZKA==",
+          "dev": true
+        },
+        "js-sha3": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.6.1.tgz",
+          "integrity": "sha1-W4n3enR3Z5h39YxKB1JAk0sflcA=",
+          "dev": true
+        },
         "mobx": {
-          "version": "3.6.1",
+          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
-          "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=",
+          "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==",
           "dev": true
         },
         "prop-types": {
@@ -254,7 +415,7 @@
         "@parity/mobx": "1.1.2",
         "@parity/ui": "3.0.22",
         "format-number": "3.0.0",
-        "mobx": "3.6.1",
+        "mobx": "3.6.2",
         "mobx-react": "4.3.5",
         "prop-types": "15.6.1",
         "react": "16.2.0",
@@ -284,9 +445,9 @@
           }
         },
         "mobx": {
-          "version": "3.6.1",
+          "version": "3.6.2",
-          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz",
+          "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
-          "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=",
+          "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==",
           "dev": true
         },
         "prop-types": {

js/package.json

@@ -21,10 +21,10 @@
     "Parity"
   ],
   "scripts": {
-    "build": "npm run build:inject && npm run build:app && npm run build:embed",
+    "build": "npm run build:inject && npm run build:app:embed",
     "build:app": "webpack --config webpack/app",
     "build:inject": "webpack --config webpack/inject",
-    "build:embed": "cross-env EMBED=1 node webpack/embed",
+    "build:app:embed": "cross-env EMBED=1 node webpack/embed",
     "build:i18n": "npm run clean && npm run build && babel-node ./scripts/build-i18n.js",
     "ci:build": "cross-env NODE_ENV=production npm run build",
     "clean": "rimraf ./.build ./.coverage ./.happypack",

js/webpack/app.js

@@ -47,9 +47,10 @@ const EMBED = process.env.EMBED;
 const isProd = ENV === 'production';
 const isEmbed = EMBED === '1' || EMBED === 'true';
 
-const entry = isEmbed
+const entry = {
-  ? { embed: ['babel-polyfill', './embed.js'] }
+  embed: ['babel-polyfill', './embed.js'],
-  : { bundle: ['babel-polyfill', './index.parity.js'] };
+  bundle: ['babel-polyfill', './index.parity.js']
+};
 
 module.exports = {
   cache: !isProd,
@@ -164,101 +165,96 @@ module.exports = {
   },
 
   plugins: (function () {
-    let plugins = Shared.getPlugins().concat(
+    let plugins = Shared.getPlugins(isProd, true).concat(
       new WebpackErrorNotificationPlugin(),
       new ExtractTextPlugin({
-        filename: `${isEmbed ? 'embed' : 'bundle'}.css`
+        filename: 'bundle.css',
+        allChunks: true
       }),
     );
 
-    if (!isEmbed) {
+    plugins = [].concat(
-      plugins = [].concat(
+      plugins,
-        plugins,
 
-        new HtmlWebpackPlugin({
+      new HtmlWebpackPlugin({
-          title: 'Parity',
+        title: 'Parity Bar',
-          filename: 'index.html',
+        filename: 'embed.html',
-          template: './index.parity.ejs',
+        template: './index.parity.ejs',
-          favicon: FAVICON,
+        favicon: FAVICON,
-          chunks: ['bundle']
+        chunks: ['commons', 'embed']
-        }),
+      }),
 
-        new CopyWebpackPlugin(
+      new HtmlWebpackPlugin({
-          flatten([
+        title: 'Parity',
-            {
+        filename: 'index.html',
-              from: path.join(__dirname, '../src/dev.web3.html'),
+        template: './index.parity.ejs',
-              to: 'dev.web3/index.html'
+        favicon: FAVICON,
-            },
+        chunks: ['commons', 'bundle']
-            {
+      }),
-              from: path.join(__dirname, '../src/dev.parity.html'),
-              to: 'dev.parity/index.html'
-            },
-            {
-              from: path.join(__dirname, '../src/error_pages.css'),
-              to: 'styles.css'
-            },
-            {
-              from: path.join(__dirname, '../src/index.electron.js'),
-              to: 'electron.js'
-            },
-            {
-              from: path.join(__dirname, '../package.electron.json'),
-              to: 'package.json'
-            },
-            flatten(
-              DAPPS_ALL
-                .map((dapp) => {
-                  const dir = path.join(__dirname, '../node_modules', dapp.package);
 
-                  if (!fs.existsSync(dir)) {
+      new CopyWebpackPlugin(
-                    return null;
+        flatten([
-                  }
+          {
+            from: path.join(__dirname, '../src/dev.web3.html'),
+            to: 'dev.web3/index.html'
+          },
+          {
+            from: path.join(__dirname, '../src/dev.parity.html'),
+            to: 'dev.parity/index.html'
+          },
+          {
+            from: path.join(__dirname, '../src/error_pages.css'),
+            to: 'styles.css'
+          },
+          {
+            from: path.join(__dirname, '../src/index.electron.js'),
+            to: 'electron.js'
+          },
+          {
+            from: path.join(__dirname, '../package.electron.json'),
+            to: 'package.json'
+          },
+          flatten(
+            DAPPS_ALL
+              .map((dapp) => {
+                const dir = path.join(__dirname, '../node_modules', dapp.package);
 
-                  if (!fs.existsSync(path.join(dir, 'dist'))) {
+                if (!fs.existsSync(dir)) {
-                    rimraf.sync(path.join(dir, 'node_modules'));
+                  return null;
+                }
 
-                    return {
+                if (!fs.existsSync(path.join(dir, 'dist'))) {
-                      from: path.join(dir),
+                  rimraf.sync(path.join(dir, 'node_modules'));
-                      to: `dapps/${dapp.id}/`
-                    };
-                  }
 
-                  return [
+                  return {
-                    'icon.png', 'index.html', 'dist.css', 'dist.js',
+                    from: path.join(dir),
-                    isProd ? null : 'dist.css.map',
+                    to: `dapps/${dapp.id}/`
-                    isProd ? null : 'dist.js.map'
+                  };
-                  ]
+                }
-                    .filter((file) => file)
-                    .map((file) => path.join(dir, file))
-                    .filter((from) => fs.existsSync(from))
-                    .map((from) => ({
-                      from,
-                      to: `dapps/${dapp.id}/`
-                    }))
-                    .concat({
-                      from: path.join(dir, 'dist'),
-                      to: `dapps/${dapp.id}/dist/`
-                    });
-                })
-                .filter((copy) => copy)
-            )
-          ]),
-          {}
-        )
-      );
-    }
 
-    if (isEmbed) {
+                return [
-      plugins.push(
+                  'icon.png', 'index.html', 'dist.css', 'dist.js',
-        new HtmlWebpackPlugin({
+                  isProd ? null : 'dist.css.map',
-          title: 'Parity Bar',
+                  isProd ? null : 'dist.js.map'
-          filename: 'embed.html',
+                ]
-          template: './index.parity.ejs',
+                  .filter((file) => file)
-          favicon: FAVICON,
+                  .map((file) => path.join(dir, file))
-          chunks: ['embed']
+                  .filter((from) => fs.existsSync(from))
-        })
+                  .map((from) => ({
-      );
+                    from,
-    }
+                    to: `dapps/${dapp.id}/`
+                  }))
+                  .concat({
+                    from: path.join(dir, 'dist'),
+                    to: `dapps/${dapp.id}/dist/`
+                  });
+              })
+              .filter((copy) => copy)
+          )
+        ]),
+        {}
+      )
+    );
 
     return plugins;
   }())

js/webpack/inject.js

@@ -77,5 +77,5 @@ module.exports = {
       }
     ]
   },
-  plugins: Shared.getPlugins()
+  plugins: Shared.getPlugins(isProd, false)
 };

js/webpack/shared.js

@@ -19,7 +19,6 @@ const webpack = require('webpack');
 const HappyPack = require('happypack');
 const PackageJson = require('../package.json');
 
-const EMBED = process.env.EMBED;
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 const UI_VERSION = PackageJson
@@ -34,11 +33,10 @@ const UI_VERSION = PackageJson
   })
   .join('.');
 
-function getPlugins (_isProd = isProd) {
+function getPlugins (_isProd = isProd, withCommons = false) {
   const plugins = [
     new webpack.DefinePlugin({
       'process.env': {
-        EMBED: JSON.stringify(EMBED),
         NODE_ENV: JSON.stringify(ENV),
         RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
         PARITY_URL: JSON.stringify(process.env.PARITY_URL),
@@ -55,6 +53,13 @@ function getPlugins (_isProd = isProd) {
   ];
 
   if (_isProd) {
+    if (withCommons) {
+      plugins.push(
+        new webpack.optimize.CommonsChunkPlugin({
+          name: 'commons'
+        })
+      )
+    }
     plugins.push(
       new webpack.optimize.ModuleConcatenationPlugin(),
       new webpack.optimize.UglifyJsPlugin({