Create webpack analysis files (size) (#5009)

js/package.json

@@ -26,6 +26,10 @@
     "Promise"
   ],
   "scripts": {
+    "analize": "npm run analize:lib && npm run analize:dll && npm run analize:app",
+    "analize:app": "WPANALIZE=1 webpack --config webpack/app --json > .build/analize.app.json && cat .build/analize.app.json | webpack-bundle-size-analyzer",
+    "analize:lib": "WPANALIZE=1 webpack --config webpack/libraries --json > .build/analize.lib.json && cat .build/analize.lib.json | webpack-bundle-size-analyzer",
+    "analize:dll": "WPANALIZE=1 webpack --config webpack/vendor --json > .build/analize.dll.json && cat .build/analize.app.json | webpack-bundle-size-analyzer",
     "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",
@@ -141,6 +145,7 @@
     "to-source": "2.0.3",
     "url-loader": "0.5.7",
     "webpack": "2.2.1",
+    "webpack-bundle-size-analyzer": "2.5.0",
     "webpack-dev-middleware": "1.10.1",
     "webpack-error-notification": "0.1.6",
     "webpack-hot-middleware": "2.17.1",

js/webpack/app.js

@@ -36,6 +36,7 @@ const EMBED = process.env.EMBED;
 
 const isProd = ENV === 'production';
 const isEmbed = EMBED === '1' || EMBED === 'true';
+const isAnalize = process.env.WPANALIZE === '1';
 
 const entry = isEmbed
   ? {
@@ -215,7 +216,7 @@ module.exports = {
       );
     }
 
-    if (!isProd) {
+    if (!isAnalize && !isProd) {
       const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
 
       plugins.push(

js/webpack/shared.js

@@ -29,6 +29,7 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
 const EMBED = process.env.EMBED;
 const ENV = process.env.NODE_ENV || 'development';
 const isProd = ENV === 'production';
+const isAnalize = process.env.WPANALIZE === '1';
 
 function getBabelrc () {
   const babelrc = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../.babelrc')));
@@ -80,55 +81,59 @@ function getPlugins (_isProd = isProd) {
     })
   ];
 
-  const plugins = [
+  const plugins = (isAnalize
-    new ProgressBarPlugin({
+    ? []
-      format: '[:msg] [:bar] ' + ':percent' + ' (:elapsed seconds)'
+    : [
-    }),
+      new ProgressBarPlugin({
+        format: '[:msg] [:bar] ' + ':percent' + ' (:elapsed seconds)'
+      })
+    ]).concat([
+      new HappyPack({
+        id: 'css',
+        threads: 4,
+        loaders: [
+          'style-loader',
+          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+          'postcss-loader'
+        ],
+        verbose: !isAnalize
+      }),
 
-    new HappyPack({
+      new HappyPack({
-      id: 'css',
+        id: 'babel-js',
-      threads: 4,
+        threads: 4,
-      loaders: [
+        loaders: [ isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true' ],
-        'style-loader',
+        verbose: !isAnalize
-        'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
+      }),
-        'postcss-loader'
-      ]
-    }),
 
-    new HappyPack({
+      new webpack.DefinePlugin({
-      id: 'babel-js',
+        'process.env': {
-      threads: 4,
+          EMBED: JSON.stringify(EMBED),
-      loaders: [ isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true' ]
+          NODE_ENV: JSON.stringify(ENV),
-    }),
+          RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
+          PARITY_URL: JSON.stringify(process.env.PARITY_URL),
+          DAPPS_URL: JSON.stringify(process.env.DAPPS_URL),
+          LOGGING: JSON.stringify(!isProd)
+        }
+      }),
 
-    new webpack.DefinePlugin({
+      new webpack.LoaderOptionsPlugin({
-      'process.env': {
+        minimize: isProd,
-        EMBED: JSON.stringify(EMBED),
+        debug: !isProd,
-        NODE_ENV: JSON.stringify(ENV),
+        options: {
-        RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS),
+          context: path.join(__dirname, '../src'),
-        PARITY_URL: JSON.stringify(process.env.PARITY_URL),
+          postcss: postcss,
-        DAPPS_URL: JSON.stringify(process.env.DAPPS_URL),
+          babel: getBabelrc()
-        LOGGING: JSON.stringify(!isProd)
+        }
-      }
+      }),
-    }),
 
-    new webpack.LoaderOptionsPlugin({
+      new webpack.optimize.OccurrenceOrderPlugin(!_isProd),
-      minimize: isProd,
-      debug: !isProd,
-      options: {
-        context: path.join(__dirname, '../src'),
-        postcss: postcss,
-        babel: getBabelrc()
-      }
-    }),
 
-    new webpack.optimize.OccurrenceOrderPlugin(!_isProd),
+      new CircularDependencyPlugin({
-
+        exclude: /node_modules/,
-    new CircularDependencyPlugin({
+        failOnError: true
-      exclude: /node_modules/,
+      })
-      failOnError: true
+    ]);
-    })
-  ];
 
   if (_isProd) {
     plugins.push(new webpack.optimize.UglifyJsPlugin({