From 5bd4d2c25de130b2970b5907fb3b38442aa24ac5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20Drwi=C4=99ga?= Date: Mon, 19 Mar 2018 12:08:53 +0100 Subject: [PATCH] Optimize embed size. --- package-lock.json | 29 +++++++++++++-------------- package.json | 4 ++-- webpack/app.js | 50 +++++++++++++++++++++++++---------------------- webpack/shared.js | 2 -- 4 files changed, 43 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3796e8..95f4fc6 100644 --- a/package-lock.json +++ b/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.1.4", - "mobx": "3.6.0", + "mobx": "3.6.2", "mobx-react": "4.3.5", "prop-types": "15.6.1", "react": "16.2.0", @@ -63,9 +63,9 @@ }, "dependencies": { "mobx": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.0.tgz", - "integrity": "sha1-IN4Hm34Vh0oQXVROnynbiiIp+eM=", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz", + "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==", "dev": true }, "prop-types": { @@ -119,13 +119,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", - "mobx": "3.6.0", + "mobx": "3.6.2", "mobx-react": "4.3.5", "prop-types": "15.6.1", "react": "16.2.0", @@ -137,9 +136,9 @@ }, "dependencies": { "mobx": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.0.tgz", - "integrity": "sha1-IN4Hm34Vh0oQXVROnynbiiIp+eM=", + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz", + "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==", "dev": true }, "prop-types": { @@ -220,7 +219,7 @@ "@parity/mobx": "1.1.2", "@parity/ui": "3.1.4", "format-number": "3.0.0", - "mobx": "3.6.0", + "mobx": "3.6.2", "mobx-react": "4.3.5", "prop-types": "15.6.1", "react": "16.2.0", @@ -233,9 +232,9 @@ }, "dependencies": { "mobx": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.0.tgz", - "integrity": "sha1-IN4Hm34Vh0oQXVROnynbiiIp+eM=", + "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/package.json b/package.json index 0e1d402..19a29d1 100644 --- a/package.json +++ b/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/webpack/app.js b/webpack/app.js index 1e0aeb5..f1ed1d8 100644 --- a/webpack/app.js +++ b/webpack/app.js @@ -19,6 +19,7 @@ const fs = require('fs'); const path = require('path'); const rimraf = require('rimraf'); const flatten = require('lodash.flatten'); +const webpack = require('webpack'); // const ReactIntlAggregatePlugin = require('react-intl-aggregate-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const WebpackErrorNotificationPlugin = require('webpack-error-notification'); @@ -45,9 +46,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, @@ -162,23 +164,30 @@ module.exports = { }, plugins: (function () { - let plugins = Shared.getPlugins().concat( - new WebpackErrorNotificationPlugin(), - new ExtractTextPlugin({ - filename: `${isEmbed ? 'embed' : 'bundle'}.css` - }), - ); - - if (!isEmbed) { - plugins = [].concat( - plugins, + let plugins = [] + .concat(Shared.getPlugins()) + .concat( + new WebpackErrorNotificationPlugin(), + new ExtractTextPlugin({ + filename: '[name].css', + allChunks: true + }) + ) + .concat( + new HtmlWebpackPlugin({ + title: 'Parity Bar', + filename: 'embed.html', + template: './index.parity.ejs', + favicon: FAVICON, + chunks: ['commons', 'embed'] + }), new HtmlWebpackPlugin({ title: 'Parity', filename: 'index.html', template: './index.parity.ejs', favicon: FAVICON, - chunks: ['bundle'] + chunks: ['commons', 'bundle'] }), new CopyWebpackPlugin( @@ -244,16 +253,11 @@ module.exports = { {} ) ); - } - if (isEmbed) { - plugins.push( - new HtmlWebpackPlugin({ - title: 'Parity Bar', - filename: 'embed.html', - template: './index.parity.ejs', - favicon: FAVICON, - chunks: ['embed'] + if (isProd) { + plugins.unshift( + new webpack.optimize.CommonsChunkPlugin({ + name: 'commons' }) ); } diff --git a/webpack/shared.js b/webpack/shared.js index 63c86c7..2834ea9 100644 --- a/webpack/shared.js +++ b/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 @@ -38,7 +37,6 @@ function getPlugins (_isProd = isProd) { 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), -- GitLab