From e65fc23bc5f2cb3e5579549b7409ddca37130d34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Drwi=C4=99ga?= Date: Mon, 12 Mar 2018 20:34:04 +0100 Subject: [PATCH] Extract common chunks plugin. --- js/package-lock.json | 195 +++++++++++++++++++++++++++++++++++++++---- js/package.json | 4 +- js/webpack/app.js | 168 ++++++++++++++++++------------------- js/webpack/inject.js | 2 +- js/webpack/shared.js | 11 ++- 5 files changed, 271 insertions(+), 109 deletions(-) diff --git a/js/package-lock.json b/js/package-lock.json index 10c90235b..b8229249a 100644 --- a/js/package-lock.json +++ b/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", - "mobx": "3.6.1", + "@parity/ui": "3.1.4", + "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", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz", - "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz", + "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.0.22", - "mobx": "3.6.1", + "@parity/ui": "3.1.4", + "mobx": "3.6.2", "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", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz", - "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.1.tgz", - "integrity": "sha1-rmOo8A4UhadA0Pka4val9o4wO+o=", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz", + "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==", "dev": true }, "prop-types": { diff --git a/js/package.json b/js/package.json index dbc958221..0e382c3f7 100644 --- a/js/package.json +++ b/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", diff --git a/js/webpack/app.js b/js/webpack/app.js index 45d8f7762..fa32ca0ca 100644 --- a/js/webpack/app.js +++ b/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 - ? { embed: ['babel-polyfill', './embed.js'] } - : { bundle: ['babel-polyfill', './index.parity.js'] }; +const entry = { + embed: ['babel-polyfill', './embed.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, + plugins = [].concat( + plugins, - new HtmlWebpackPlugin({ - title: 'Parity', - filename: 'index.html', - template: './index.parity.ejs', - favicon: FAVICON, - chunks: ['bundle'] - }), + new HtmlWebpackPlugin({ + title: 'Parity Bar', + filename: 'embed.html', + template: './index.parity.ejs', + favicon: FAVICON, + chunks: ['commons', 'embed'] + }), - new CopyWebpackPlugin( - 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); + new HtmlWebpackPlugin({ + title: 'Parity', + filename: 'index.html', + template: './index.parity.ejs', + favicon: FAVICON, + chunks: ['commons', 'bundle'] + }), - if (!fs.existsSync(dir)) { - return null; - } + new CopyWebpackPlugin( + 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'))) { - rimraf.sync(path.join(dir, 'node_modules')); + if (!fs.existsSync(dir)) { + return null; + } - return { - from: path.join(dir), - to: `dapps/${dapp.id}/` - }; - } + if (!fs.existsSync(path.join(dir, 'dist'))) { + rimraf.sync(path.join(dir, 'node_modules')); - return [ - 'icon.png', 'index.html', 'dist.css', 'dist.js', - isProd ? null : 'dist.css.map', - 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) - ) - ]), - {} - ) - ); - } + return { + from: path.join(dir), + to: `dapps/${dapp.id}/` + }; + } - if (isEmbed) { - plugins.push( - new HtmlWebpackPlugin({ - title: 'Parity Bar', - filename: 'embed.html', - template: './index.parity.ejs', - favicon: FAVICON, - chunks: ['embed'] - }) - ); - } + return [ + 'icon.png', 'index.html', 'dist.css', 'dist.js', + isProd ? null : 'dist.css.map', + 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) + ) + ]), + {} + ) + ); return plugins; }()) diff --git a/js/webpack/inject.js b/js/webpack/inject.js index ddd28d634..cdd3f32c1 100644 --- a/js/webpack/inject.js +++ b/js/webpack/inject.js @@ -77,5 +77,5 @@ module.exports = { } ] }, - plugins: Shared.getPlugins() + plugins: Shared.getPlugins(isProd, false) }; diff --git a/js/webpack/shared.js b/js/webpack/shared.js index 63c86c7e5..d2af20ab8 100644 --- a/js/webpack/shared.js +++ b/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({