Build embedded Parity JS properly and separatly (#4426)

* Add a specific embed webpack build // output assets in JSON

* WIP Embed

* Updated Webpack

* Update exports // Webpack config

* Fix app build fail

* Fix NPm scripts

* Reduce Embed dependencies

* Fix NPM exports

* remvoe stats

* Lazy-Load worker (not to load in embed)

* PR Grumbles + Fix tests

js/.babelrc

@@ -4,11 +4,11 @@
     "stage-0", "react"
   ],
   "plugins": [
-    "transform-runtime",
     "transform-decorators-legacy",
     "transform-class-properties",
     "transform-object-rest-spread",
-    "lodash"
+    "lodash",
+    "recharts"
   ],
   "retainLines": true,
   "env": {
@@ -25,6 +25,7 @@
     },
     "test": {
       "plugins": [
+        "transform-runtime",
         [ "babel-plugin-webpack-alias", { "config": "webpack/test.js" } ]
       ]
     }

js/package.json

@@ -25,18 +25,20 @@
     "Promise"
   ],
   "scripts": {
-    "build": "npm run build:lib && npm run build:dll && npm run build:app",
+    "build": "npm run build:lib && npm run build:dll && npm run build:app && npm run build:embed",
     "build:app": "webpack --config webpack/app",
     "build:lib": "webpack --config webpack/libraries",
     "build:dll": "webpack --config webpack/vendor",
     "build:markdown": "babel-node ./scripts/build-rpc-markdown.js",
     "build:json": "babel-node ./scripts/build-rpc-json.js",
-    "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app",
+    "build:embed": "EMBED=1 node webpack/embed",
+    "ci:build": "npm run ci:build:lib && npm run ci:build:dll && npm run ci:build:app && npm run ci:build:embed",
     "ci:build:app": "NODE_ENV=production webpack --config webpack/app",
     "ci:build:lib": "NODE_ENV=production webpack --config webpack/libraries",
     "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor",
     "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm",
     "ci:build:jsonrpc": "babel-node ./scripts/build-rpc-json.js --output .npmjs/jsonrpc",
+    "ci:build:embed": "NODE_ENV=production EMBED=1 node webpack/embed",
     "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app",
     "start:app": "node webpack/dev.server",
     "clean": "rm -rf ./.build ./.coverage ./.happypack ./.npmjs ./build",
@@ -53,27 +55,28 @@
     "prepush": "npm run lint:cached"
   },
   "devDependencies": {
-    "babel-cli": "6.18.0",
+    "babel-cli": "6.22.2",
-    "babel-core": "6.21.0",
+    "babel-core": "6.22.1",
     "babel-eslint": "7.1.1",
     "babel-loader": "6.2.10",
     "babel-plugin-lodash": "3.2.11",
-    "babel-plugin-react-intl": "2.2.0",
+    "babel-plugin-react-intl": "2.3.1",
-    "babel-plugin-transform-class-properties": "6.19.0",
+    "babel-plugin-recharts": "1.1.0",
+    "babel-plugin-transform-class-properties": "6.22.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
-    "babel-plugin-transform-object-rest-spread": "6.20.2",
+    "babel-plugin-transform-object-rest-spread": "6.22.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.2.11",
+    "babel-plugin-transform-react-remove-prop-types": "0.3.0",
-    "babel-plugin-transform-runtime": "6.15.0",
+    "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
-    "babel-polyfill": "6.20.0",
+    "babel-polyfill": "6.22.0",
-    "babel-preset-env": "1.1.4",
+    "babel-preset-env": "1.1.8",
-    "babel-preset-es2015": "6.18.0",
+    "babel-preset-es2015": "6.22.0",
-    "babel-preset-es2016": "6.16.0",
+    "babel-preset-es2016": "6.22.0",
-    "babel-preset-es2017": "6.16.0",
+    "babel-preset-es2017": "6.22.0",
-    "babel-preset-react": "6.16.0",
+    "babel-preset-react": "6.22.0",
-    "babel-preset-stage-0": "6.16.0",
+    "babel-preset-stage-0": "6.22.0",
-    "babel-register": "6.18.0",
+    "babel-register": "6.22.0",
-    "babel-runtime": "6.20.0",
+    "babel-runtime": "6.22.0",
     "chai": "3.5.0",
     "chai-as-promised": "6.0.0",
     "chai-enzyme": "0.6.1",
@@ -132,7 +135,7 @@
     "stylelint": "7.7.0",
     "stylelint-config-standard": "15.0.1",
     "url-loader": "0.5.7",
-    "webpack": "2.2.0-rc.2",
+    "webpack": "2.2.1",
     "webpack-dev-middleware": "1.9.0",
     "webpack-error-notification": "0.1.6",
     "webpack-hot-middleware": "2.14.0",

js/src/library.etherscan.js

@@ -31,4 +31,4 @@ if (isNode) {
 
 import Etherscan from './3rdparty/etherscan';
 
-module.exports = Etherscan;
+export default Etherscan;

js/src/library.jsonrpc.js

@@ -16,4 +16,4 @@
 
 import JsonRpc from './jsonrpc';
 
-module.exports = JsonRpc;
+export default JsonRpc;

js/src/library.parity.js

@@ -32,4 +32,4 @@ if (isNode) {
 import Abi from './abi';
 import Api from './api';
 
-module.exports = { Api, Abi };
+export { Api, Abi };

js/src/library.shapeshift.js

@@ -31,4 +31,4 @@ if (isNode) {
 
 import ShapeShift from './3rdparty/shapeshift';
 
-module.exports = ShapeShift;
+export default ShapeShift;

js/src/modals/CreateAccount/NewAccount/newAccount.js

@@ -20,7 +20,8 @@ import { FormattedMessage } from 'react-intl';
 import { IconButton } from 'material-ui';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 
-import { Form, Input, IdentityIcon, PasswordStrength } from '~/ui';
+import { Form, Input, IdentityIcon } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 import { RefreshIcon } from '~/ui/Icons';
 
 import styles from '../createAccount.css';

js/src/modals/CreateAccount/RawKey/rawKey.js

@@ -18,7 +18,8 @@ import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Form, Input, PasswordStrength } from '~/ui';
+import { Form, Input } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 
 import styles from '../createAccount.css';
 

js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -19,7 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Checkbox } from 'material-ui';
 
-import { Form, Input, PasswordStrength } from '~/ui';
+import { Form, Input } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 
 import styles from '../createAccount.css';
 

js/src/modals/LoadContract/loadContract.js

@@ -20,7 +20,8 @@ import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Modal, Editor } from '~/ui';
+import { Button, Modal } from '~/ui';
+import Editor from '~/ui/Editor';
 import { CancelIcon, CheckIcon, DeleteIcon } from '~/ui/Icons';
 
 import styles from './loadContract.css';

js/src/modals/PasswordManager/passwordManager.js

@@ -23,7 +23,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError, openSnackbar } from '~/redux/actions';
-import { Button, Modal, IdentityName, IdentityIcon, PasswordStrength } from '~/ui';
+import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
+import PasswordStrength from '~/ui/Form/PasswordStrength';
 import Form, { Input } from '~/ui/Form';
 import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
 

js/src/modals/SaveContract/saveContract.js

@@ -19,7 +19,8 @@ import React, { Component, PropTypes } from 'react';
 import SaveIcon from 'material-ui/svg-icons/content/save';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 
-import { Button, Modal, Editor, Form, Input } from '~/ui';
+import { Button, Modal, Form, Input } from '~/ui';
+import Editor from '~/ui/Editor';
 import { ERRORS, validateName } from '~/util/validation';
 
 import styles from './saveContract.css';

js/src/redux/providers/workerWrapper.js

@@ -0,0 +1,23 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+if (!process.env.EMBED) {
+  const setupWorker = require('./worker').setupWorker;
+
+  module.exports = { setupWorker };
+} else {
+  module.exports = { setupWorker: () => {} };
+}

js/src/redux/store.js

@@ -20,7 +20,7 @@ import initMiddleware from './middleware';
 import initReducers from './reducers';
 
 import { load as loadWallet } from './providers/walletActions';
-import { setupWorker } from './providers/worker';
+import { setupWorker } from './providers/workerWrapper';
 
 import {
   Balances as BalancesProvider,

js/src/ui/Actionbar/index.js

@@ -14,4 +14,9 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+export Export from './Export';
+export Import from './Import';
+export Search from './Search';
+export Sort from './Sort';
+
 export default from './actionbar';

js/src/ui/Form/index.js

@@ -14,35 +14,19 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import AddressSelect from './AddressSelect';
+export AddressSelect from './AddressSelect';
-import DappUrlInput from './DappUrlInput';
+export DappUrlInput from './DappUrlInput';
-import FormWrap from './FormWrap';
+export FormWrap from './FormWrap';
-import Input from './Input';
+export Input from './Input';
-import InputAddress from './InputAddress';
+export InputAddress from './InputAddress';
-import InputAddressSelect from './InputAddressSelect';
+export InputAddressSelect from './InputAddressSelect';
-import InputChip from './InputChip';
+export InputChip from './InputChip';
-import InputDate from './InputDate';
+export InputDate from './InputDate';
-import InputInline from './InputInline';
+export InputInline from './InputInline';
-import InputTime from './InputTime';
+export InputTime from './InputTime';
-import Label from './Label';
+export Label from './Label';
-import RadioButtons from './RadioButtons';
+export RadioButtons from './RadioButtons';
-import Select from './Select';
+export Select from './Select';
-import TypedInput from './TypedInput';
+export TypedInput from './TypedInput';
 
 export default from './form';
-export {
-  AddressSelect,
-  DappUrlInput,
-  FormWrap,
-  Input,
-  InputAddress,
-  InputAddressSelect,
-  InputChip,
-  InputDate,
-  InputInline,
-  InputTime,
-  Label,
-  RadioButtons,
-  Select,
-  TypedInput
-};

js/src/ui/index.js

@@ -14,118 +14,43 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import AccountCard from './AccountCard';
+export AccountCard from './AccountCard';
-import Actionbar from './Actionbar';
+export Actionbar, { Export as ActionbarExport, Import as ActionbarImport, Search as ActionbarSearch, Sort as ActionbarSort } from './Actionbar';
-import ActionbarExport from './Actionbar/Export';
+export Badge from './Badge';
-import ActionbarImport from './Actionbar/Import';
+export Balance from './Balance';
-import ActionbarSearch from './Actionbar/Search';
+export BlockStatus from './BlockStatus';
-import ActionbarSort from './Actionbar/Sort';
+export Button from './Button';
-import Badge from './Badge';
+export Certifications from './Certifications';
-import Balance from './Balance';
+export ConfirmDialog from './ConfirmDialog';
-import BlockStatus from './BlockStatus';
+export Container, { Title as ContainerTitle } from './Container';
-import Button from './Button';
+export ContextProvider from './ContextProvider';
-import Certifications from './Certifications';
+export CopyToClipboard from './CopyToClipboard';
-import ConfirmDialog from './ConfirmDialog';
+export CurrencySymbol from './CurrencySymbol';
-import Container, { Title as ContainerTitle } from './Container';
+export DappCard from './DappCard';
-import ContextProvider from './ContextProvider';
+export DappIcon from './DappIcon';
-import CopyToClipboard from './CopyToClipboard';
+export Errors from './Errors';
-import CurrencySymbol from './CurrencySymbol';
+export Features, { FEATURES, FeaturesStore } from './Features';
-import DappCard from './DappCard';
+export Form, { AddressSelect, DappUrlInput, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
-import DappIcon from './DappIcon';
+export GasPriceEditor from './GasPriceEditor';
-import Editor from './Editor';
+export GasPriceSelector from './GasPriceSelector';
-import Errors from './Errors';
+export Icons from './Icons';
-import Features, { FEATURES, FeaturesStore } from './Features';
+export IdentityIcon from './IdentityIcon';
-import Form, { AddressSelect, DappUrlInput, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput } from './Form';
+export IdentityName from './IdentityName';
-import GasPriceEditor from './GasPriceEditor';
+export LanguageSelector from './LanguageSelector';
-import GasPriceSelector from './GasPriceSelector';
+export Loading from './Loading';
-import Icons from './Icons';
+export MethodDecoding from './MethodDecoding';
-import IdentityIcon from './IdentityIcon';
+export Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
-import IdentityName from './IdentityName';
+export muiTheme from './Theme';
-import LanguageSelector from './LanguageSelector';
+export Page from './Page';
-import Loading from './Loading';
+export ParityBackground from './ParityBackground';
-import MethodDecoding from './MethodDecoding';
+export Portal from './Portal';
-import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
+export QrCode from './QrCode';
-import muiTheme from './Theme';
+export SectionList from './SectionList';
-import Page from './Page';
+export ShortenedHash from './ShortenedHash';
-import ParityBackground from './ParityBackground';
+export SignerIcon from './SignerIcon';
-import PasswordStrength from './Form/PasswordStrength';
+export Tags from './Tags';
-import Portal from './Portal';
+export Title from './Title';
-import QrCode from './QrCode';
+export Tooltips, { Tooltip } from './Tooltips';
-import SectionList from './SectionList';
+export TxHash from './TxHash';
-import ShortenedHash from './ShortenedHash';
+export TxList from './TxList';
-import SignerIcon from './SignerIcon';
+export Warning from './Warning';
-import Tags from './Tags';
-import Title from './Title';
-import Tooltips, { Tooltip } from './Tooltips';
-import TxHash from './TxHash';
-import TxList from './TxList';
-import Warning from './Warning';
-
-export {
-  AccountCard,
-  Actionbar,
-  ActionbarExport,
-  ActionbarImport,
-  ActionbarSearch,
-  ActionbarSort,
-  AddressSelect,
-  Badge,
-  Balance,
-  BlockStatus,
-  Button,
-  Certifications,
-  ConfirmDialog,
-  Container,
-  ContainerTitle,
-  ContextProvider,
-  CopyToClipboard,
-  CurrencySymbol,
-  DappCard,
-  DappIcon,
-  DappUrlInput,
-  Editor,
-  Errors,
-  FEATURES,
-  Features,
-  FeaturesStore,
-  Form,
-  FormWrap,
-  GasPriceEditor,
-  GasPriceSelector,
-  Icons,
-  Input,
-  InputAddress,
-  InputAddressSelect,
-  InputChip,
-  InputDate,
-  InputInline,
-  InputTime,
-  IdentityIcon,
-  IdentityName,
-  Label,
-  LanguageSelector,
-  Loading,
-  MethodDecoding,
-  Modal,
-  BusyStep,
-  CompletedStep,
-  muiTheme,
-  Page,
-  ParityBackground,
-  PasswordStrength,
-  Portal,
-  QrCode,
-  RadioButtons,
-  Select,
-  ShortenedHash,
-  SectionList,
-  SignerIcon,
-  Tags,
-  Title,
-  Tooltip,
-  Tooltips,
-  TxHash,
-  TxList,
-  TypedInput,
-  Warning
-};

js/src/util/signer.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import scrypt from 'scryptsy';
-import * as Transaction from 'ethereumjs-tx';
+import Transaction from 'ethereumjs-tx';
 import { pbkdf2Sync } from 'crypto';
 import { createDecipheriv } from 'browserify-aes';
 

js/src/views/Contract/contract.js

@@ -30,7 +30,8 @@ import { newError } from '~/redux/actions';
 import { setVisibleAccounts } from '~/redux/providers/personalActions';
 
 import { EditMeta, ExecuteContract } from '~/modals';
-import { Actionbar, Button, Page, Modal, Editor } from '~/ui';
+import { Actionbar, Button, Page, Modal } from '~/ui';
+import Editor from '~/ui/Editor';
 
 import Header from '../Account/Header';
 import Delete from '../Address/Delete';

js/src/views/WriteContract/writeContract.js

@@ -28,7 +28,8 @@ import ListIcon from 'material-ui/svg-icons/action/view-list';
 import SettingsIcon from 'material-ui/svg-icons/action/settings';
 import SendIcon from 'material-ui/svg-icons/content/send';
 
-import { Actionbar, ActionbarExport, ActionbarImport, Button, Editor, Page, Select, Input } from '~/ui';
+import { Actionbar, ActionbarExport, ActionbarImport, Button, Page, Select, Input } from '~/ui';
+import Editor from '~/ui/Editor';
 import { DeployContract, SaveContract, LoadContract } from '~/modals';
 
 import WriteContractStore from './writeContractStore';

js/src/views/index.js

@@ -14,44 +14,20 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import Account from './Account';
+export Account from './Account';
-import Accounts from './Accounts';
+export Accounts from './Accounts';
-import Address from './Address';
+export Address from './Address';
-import Addresses from './Addresses';
+export Addresses from './Addresses';
-import Application from './Application';
+export Application from './Application';
-import Contract from './Contract';
+export Contract from './Contract';
-import Contracts from './Contracts';
+export Contracts from './Contracts';
-import Dapp from './Dapp';
+export Dapp from './Dapp';
-import Dapps from './Dapps';
+export Dapps from './Dapps';
-import HistoryStore from './historyStore';
+export HistoryStore from './historyStore';
-import ParityBar from './ParityBar';
+export ParityBar from './ParityBar';
-import Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
+export Settings, { SettingsBackground, SettingsParity, SettingsProxy, SettingsViews } from './Settings';
-import Signer from './Signer';
+export Signer from './Signer';
-import Status from './Status';
+export Status from './Status';
-import Wallet from './Wallet';
+export Wallet from './Wallet';
-import Web from './Web';
+export Web from './Web';
-import WriteContract from './WriteContract';
+export WriteContract from './WriteContract';
-
-export {
-  Account,
-  Accounts,
-  Address,
-  Addresses,
-  Application,
-  Contract,
-  Contracts,
-  Dapp,
-  Dapps,
-  HistoryStore,
-  ParityBar,
-  Settings,
-  SettingsBackground,
-  SettingsParity,
-  SettingsProxy,
-  SettingsViews,
-  Signer,
-  Status,
-  Wallet,
-  Web,
-  WriteContract
-};

js/test/npmJsonRpc.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 try {
-  var JsonRpc = require('../.npmjs/jsonRpc/library.js');
+  var JsonRpc = require('../.npmjs/jsonrpc/library.js').default;
 
   if (typeof JsonRpc !== 'object') {
     throw new Error('JsonRpc');

js/webpack/app.js

@@ -32,17 +32,25 @@ const FAVICON = path.resolve(__dirname, '../assets/images/parity-logo-black-no-t
 
 const DEST = process.env.BUILD_DEST || '.build';
 const ENV = process.env.NODE_ENV || 'development';
+const EMBED = process.env.EMBED;
+
 const isProd = ENV === 'production';
+const isEmbed = EMBED === '1' || EMBED === 'true';
+
+const entry = isEmbed
+  ? {
+    embed: './embed.js'
+  }
+  : Object.assign({}, Shared.dappsEntry, {
+    index: './index.js'
+  });
 
 module.exports = {
   cache: !isProd,
   devtool: isProd ? '#hidden-source-map' : '#source-map',
 
   context: path.join(__dirname, '../src'),
-  entry: Object.assign({}, Shared.dappsEntry, {
+  entry: entry,
-    index: './index.js',
-    embed: './embed.js'
-  }),
   output: {
     // publicPath: '/',
     path: path.join(__dirname, '../', DEST),
@@ -55,15 +63,12 @@ module.exports = {
         test: /\.js$/,
         exclude: /(node_modules)/,
         // use: [ 'happypack/loader?id=js' ]
-        use: isProd ? ['babel-loader'] : [
+        use: isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true'
-          'babel-loader?cacheDirectory=true'
-        ],
-        options: Shared.getBabelrc()
       },
       {
         test: /\.js$/,
-        include: /node_modules\/material-ui-chip-input/,
+        include: /node_modules\/(material-chip-input|ethereumjs-tx)/,
-        use: [ 'babel-loader' ]
+        use: 'babel-loader'
       },
       {
         test: /\.json$/,
@@ -91,13 +96,13 @@ module.exports = {
         test: /\.css$/,
         include: [ /src/ ],
         // exclude: [ /src\/dapps/ ],
-        loader: isProd ? ExtractTextPlugin.extract([
+        loader: (isProd && !isEmbed) ? ExtractTextPlugin.extract([
           // 'style-loader',
           'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
           'postcss-loader'
         ]) : undefined,
         // use: [ 'happypack/loader?id=css' ]
-        use: isProd ? undefined : [
+        use: (isProd && !isEmbed) ? undefined : [
           'style-loader',
           'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
           'postcss-loader'
@@ -155,18 +160,13 @@ module.exports = {
       });
     });
 
-    const plugins = Shared.getPlugins().concat(
+    let plugins = Shared.getPlugins().concat(
-      new CopyWebpackPlugin([
+      new WebpackErrorNotificationPlugin()
-        { from: './error_pages.css', to: 'styles.css' },
+    );
-        { from: 'dapps/static' }
-      ], {}),
 
-      new WebpackErrorNotificationPlugin(),
+    if (!isEmbed) {
-
+      plugins = [].concat(
-      new webpack.DllReferencePlugin({
+        plugins,
-        context: '.',
-        manifest: require(`../${DEST}/vendor-manifest.json`)
-      }),
 
         new HtmlWebpackPlugin({
           title: 'Parity',
@@ -179,6 +179,31 @@ module.exports = {
           ]
         }),
 
+        new ServiceWorkerWebpackPlugin({
+          entry: path.join(__dirname, '../src/serviceWorker.js')
+        }),
+
+        DappsHTMLInjection,
+
+        new webpack.DllReferencePlugin({
+          context: '.',
+          manifest: require(`../${DEST}/vendor-manifest.json`)
+        }),
+
+        new ScriptExtHtmlWebpackPlugin({
+          sync: [ 'commons', 'vendor.js' ],
+          defaultAttribute: 'defer'
+        }),
+
+        new CopyWebpackPlugin([
+          { from: './error_pages.css', to: 'styles.css' },
+          { from: 'dapps/static' }
+        ], {})
+      );
+    }
+
+    if (isEmbed) {
+      plugins.push(
         new HtmlWebpackPlugin({
           title: 'Parity Bar',
           filename: 'embed.html',
@@ -188,19 +213,9 @@ module.exports = {
             isProd ? null : 'commons',
             'embed'
           ]
-      }),
+        })
-
-      new ScriptExtHtmlWebpackPlugin({
-        sync: [ 'commons', 'vendor.js' ],
-        defaultAttribute: 'defer'
-      }),
-
-      new ServiceWorkerWebpackPlugin({
-        entry: path.join(__dirname, '../src/serviceWorker.js')
-      }),
-
-      DappsHTMLInjection
       );
+    }
 
     if (!isProd) {
       const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');

js/webpack/build.server.js

@@ -36,4 +36,5 @@ app.use(wsProxy);
 var server = app.listen(process.env.PORT || 3000, function () {
   console.log('Listening on port', server.address().port);
 });
+
 server.on('upgrade', wsProxy.upgrade);

js/webpack/embed.js

@@ -0,0 +1,49 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+const webpack = require('webpack');
+const WebpackStats = require('webpack/lib/Stats');
+const path = require('path');
+const fs = require('fs');
+
+const WebpackConfig = require('./app');
+
+const compiler = webpack(WebpackConfig);
+
+compiler.run(function handler (err, stats) {
+  if (err) {
+    return console.error(err);
+  }
+
+  // @see https://github.com/webpack/webpack/blob/324d309107f00cfc38ec727521563d309339b2ec/lib/Stats.js#L790
+  // Accepted values: none, errors-only, minimal, normal, verbose
+  const options = WebpackStats.presetToOptions('normal');
+
+  options.timings = true;
+
+  const output = stats.toString(options);
+  const assets = Object.keys(stats.compilation.assets);
+
+  const embedPath = path.resolve(WebpackConfig.output.path, './embed.json');
+  const embedData = { assets: assets };
+
+  fs.writeFileSync(embedPath, JSON.stringify(embedData, null, 2));
+
+  process.stdout.write('\n');
+  process.stdout.write(output);
+  process.stdout.write('\n\n');
+});
+

js/webpack/shared.js

@@ -26,6 +26,7 @@ const rucksack = require('rucksack-css');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 
+const EMBED = process.env.EMBED;
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
 
@@ -113,6 +114,7 @@ function getPlugins (_isProd = isProd) {
 
     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),