From df76f010dadcdb5dd6a7493ff48e7555c70dbb26 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 23 Mar 2017 15:47:42 +0100 Subject: [PATCH] Create webpack analysis files (size) (#5009) --- js/package.json | 5 +++ js/webpack/app.js | 3 +- js/webpack/shared.js | 93 +++++++++++++++++++++++--------------------- 3 files changed, 56 insertions(+), 45 deletions(-) diff --git a/js/package.json b/js/package.json index 6a1e63fb1..2c0dae7cc 100644 --- a/js/package.json +++ b/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", diff --git a/js/webpack/app.js b/js/webpack/app.js index 14f2876db..6b6b4c8cd 100644 --- a/js/webpack/app.js +++ b/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( diff --git a/js/webpack/shared.js b/js/webpack/shared.js index 3f5fcd66f..2f151944e 100644 --- a/js/webpack/shared.js +++ b/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 = [ - new ProgressBarPlugin({ - format: '[:msg] [:bar] ' + ':percent' + ' (:elapsed seconds)' - }), + const plugins = (isAnalize + ? [] + : [ + 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({ - id: 'css', - threads: 4, - loaders: [ - 'style-loader', - 'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', - 'postcss-loader' - ] - }), + new HappyPack({ + id: 'babel-js', + threads: 4, + loaders: [ isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true' ], + verbose: !isAnalize + }), - new HappyPack({ - id: 'babel-js', - threads: 4, - loaders: [ isProd ? 'babel-loader' : 'babel-loader?cacheDirectory=true' ] - }), + 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), + DAPPS_URL: JSON.stringify(process.env.DAPPS_URL), + LOGGING: JSON.stringify(!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), - DAPPS_URL: JSON.stringify(process.env.DAPPS_URL), - LOGGING: JSON.stringify(!isProd) - } - }), + new webpack.LoaderOptionsPlugin({ + minimize: isProd, + debug: !isProd, + options: { + context: path.join(__dirname, '../src'), + postcss: postcss, + babel: getBabelrc() + } + }), - new webpack.LoaderOptionsPlugin({ - minimize: isProd, - debug: !isProd, - options: { - context: path.join(__dirname, '../src'), - postcss: postcss, - babel: getBabelrc() - } - }), + new webpack.optimize.OccurrenceOrderPlugin(!_isProd), - new webpack.optimize.OccurrenceOrderPlugin(!_isProd), - - new CircularDependencyPlugin({ - exclude: /node_modules/, - failOnError: true - }) - ]; + new CircularDependencyPlugin({ + exclude: /node_modules/, + failOnError: true + }) + ]); if (_isProd) { plugins.push(new webpack.optimize.UglifyJsPlugin({