Merge pull request #396 from appbaseio/build-optimization

Build optimization
appbaseio · Jul 28, 2020 · 390fe46 · 390fe46
2 parents 6ac0776 + a368544
commit 390fe46
Show file tree

Hide file tree

Showing 11 changed files with 1,280 additions and 71 deletions.
diff --git a/lerna.json b/lerna.json
@@ -4,7 +4,7 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "3.4.6",
+  "version": "3.4.7",
   "lerna": "2.11.0",
   "command": {
     "version": {

diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@appbaseio/dejavu-browser",
 	"description": "Dejavu monorepo data browser components",
-	"version": "3.4.6",
+	"version": "3.4.7",
 	"authors": [
 		"Anuj Shah <anujshah584@gmail.com>",
 		"Lakhan Samani <lakhan.m.samani@gmail.com> (https://github.com/lakhansamani)",
@@ -12,18 +12,16 @@
 	"main": "lib/index.js",
 	"module": "lib/index.es.js",
 	"peerDependencies": {
-		"@appbaseio/designkit": "^0.9.1",
-		"@appbaseio/reactivesearch": "^3.0.2",
-		"antd": "^3.10.4",
+		"@appbaseio/reactivesearch": "^3.11.7",
+		"antd": "^3.18.2",
 		"brace": "^0.11.1",
-		"lodash": "^4.17.11",
+		"lodash": "^4.17.10",
 		"moment": "^2.22.2",
 		"prop-types": "^15.6.2",
 		"react": "^16.5.1",
 		"react-ace": "^6.5.0",
 		"react-dom": "^16.5.1",
 		"react-emotion": "^9.2.12",
-		"react-feather": "^1.1.3",
 		"react-redux": "^5.0.7",
 		"react-router-dom": "^4.3.1",
 		"redux": "^3.7.2",

diff --git a/packages/browser/src/components/DataBrowser/DataBrowser.js b/packages/browser/src/components/DataBrowser/DataBrowser.js
@@ -98,7 +98,6 @@ class DataBrowser extends Component<Props> {
 				headers: convertArrayToHeaders(headers),
 			};
 		}
-
 		const { appswitcher } = getUrlParams(window.location.search);
 		const hideAppSwitcher = appswitcher && appswitcher === 'false';
 

diff --git a/packages/browser/src/components/Icons/Hash.js b/packages/browser/src/components/Icons/Hash.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+
+const Hash = forwardRef(
+	({ color = 'currentColor', size = 24, ...rest }, ref) => {
+		return (
+			<svg
+				ref={ref}
+				xmlns="http://www.w3.org/2000/svg"
+				width={size}
+				height={size}
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke={color}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				{...rest}
+			>
+				<line x1="4" y1="9" x2="20" y2="9" />
+				<line x1="4" y1="15" x2="20" y2="15" />
+				<line x1="10" y1="3" x2="8" y2="21" />
+				<line x1="16" y1="3" x2="14" y2="21" />
+			</svg>
+		);
+	},
+);
+
+Hash.propTypes = {
+	color: PropTypes.string,
+	size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Hash.displayName = 'Hash';
+
+export default Hash;
diff --git a/packages/browser/src/components/Icons/Toggle.js b/packages/browser/src/components/Icons/Toggle.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+
+const ToggleRight = forwardRef(
+	({ color = 'currentColor', size = 24, ...rest }, ref) => {
+		return (
+			<svg
+				ref={ref}
+				xmlns="http://www.w3.org/2000/svg"
+				width={size}
+				height={size}
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke={color}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				{...rest}
+			>
+				<rect x="1" y="5" width="22" height="14" rx="7" ry="7" />
+				<circle cx="16" cy="12" r="3" />
+			</svg>
+		);
+	},
+);
+
+ToggleRight.propTypes = {
+	color: PropTypes.string,
+	size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ToggleRight.displayName = 'ToggleRight';
+
+export default ToggleRight;
diff --git a/packages/browser/src/components/MappingsIcon/MappingsIcon.js b/packages/browser/src/components/MappingsIcon/MappingsIcon.js
@@ -3,8 +3,8 @@
 import React from 'react';
 import { object } from 'prop-types';
 import { Icon } from 'antd';
-import Hash from 'react-feather/dist/icons/hash';
-import Toggle from 'react-feather/dist/icons/toggle-right';
+import Hash from '../Icons/Hash';
+import Toggle from '../Icons/Toggle';
 
 type Props = {
 	mapping: object,

diff --git a/packages/browser/src/sagas/app.js b/packages/browser/src/sagas/app.js
@@ -14,7 +14,10 @@ function* handleConnectApp({ appname, url, headers }) {
 	const appUrl = trimUrl(url);
 	try {
 		yield put(clearError());
-		yield call(testConnection, appname, appUrl, headers);
+		const newHeaders =
+			headers &&
+			headers.filter(item => item.key.trim() && item.value.trim());
+		yield call(testConnection, appname, appUrl, newHeaders);
 		yield put(connectAppSuccess(appname, appUrl));
 	} catch (error) {
 		yield put(connectAppFailure());

diff --git a/packages/browser/src/utils/index.js b/packages/browser/src/utils/index.js
@@ -162,7 +162,7 @@ const getCustomHeaders = appname => {
 		const currentApp = pastApps.find(item => item.appname === appname);
 
 		if (currentApp && currentApp.headers) {
-			return currentApp.headers;
+			return currentApp.headers.filter(item => item.key && item.value);
 		}
 	}
 

diff --git a/packages/dejavu-main/package.json b/packages/dejavu-main/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "dejavu-main",
 	"description": "Dejavu main module",
-	"version": "3.4.6",
+	"version": "3.4.7",
 	"authors": [
 		"Anuj Shah <anujshah584@gmail.com>",
 		"Lakhan Samani <lakhan.m.samani@gmail.com> (https://github.com/lakhansamani)",
@@ -12,18 +12,18 @@
 	"main": "lib/index.js",
 	"module": "lib/index.es.js",
 	"peerDependencies": {
-		"react": "^16.5.1",
-		"react-dom": "^16.5.1"
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1"
 	},
 	"dependencies": {
-		"@appbaseio/dejavu-browser": "^3.4.6",
-		"@appbaseio/designkit": "^0.9.1",
-		"@appbaseio/reactivesearch": "^3.0.2",
+		"@appbaseio/dejavu-browser": "^3.4.7",
+		"@appbaseio/designkit": "^0.9.12",
+		"@appbaseio/reactivesearch": "^3.11.7",
 		"@divyanshu013/media": "^1.0.0",
 		"@fortawesome/fontawesome-svg-core": "^1.2.27",
 		"@fortawesome/free-solid-svg-icons": "^5.12.1",
 		"@fortawesome/react-fontawesome": "^0.1.8",
-		"antd": "^3.10.4",
+		"antd": "^3.18.2",
 		"appbase-js": "^4.0.2-beta.2",
 		"brace": "^0.11.1",
 		"codesandbox": "1.3.5",
@@ -44,7 +44,6 @@
 		"react-element-to-jsx-string": "^14.0.2",
 		"react-emotion": "^9.2.12",
 		"react-expand-collapse": "^0.2.0",
-		"react-feather": "^1.1.3",
 		"react-joyride": "^2.0.0-15",
 		"react-json-editor-ajrm": "^2.5.8",
 		"react-redux": "^5.0.7",
@@ -60,12 +59,16 @@
 	},
 	"devDependencies": {
 		"clean-webpack-plugin": "^1.0.0",
+		"compression-webpack-plugin": "^4.0.0",
 		"copy-webpack-plugin": "^4.0.0",
 		"favicons-webpack-plugin": "^0.0.9",
 		"html-webpack-harddisk-plugin": "^1.0.1",
 		"html-webpack-plugin": "^3.2.0",
+		"mini-css-extract-plugin": "^0.9.0",
+		"optimize-css-assets-webpack-plugin": "^5.0.3",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
+		"terser-webpack-plugin": "^3.0.8",
 		"webpack": "^4.19.0",
 		"webpack-bundle-analyzer": "^3.0.2",
 		"webpack-cli": "^3.1.0",

diff --git a/packages/dejavu-main/webpack.config.js b/packages/dejavu-main/webpack.config.js
@@ -6,9 +6,15 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const WriteWebPackPlugin = require('write-file-webpack-plugin');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 const { NODE_ENV } = process.env;
 
+const isDevelopment = NODE_ENV === 'development';
+
 const plugins = [
 	// Ignore all locale files of moment.js
 	new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -30,18 +36,63 @@ const plugins = [
 	new WriteWebPackPlugin(),
 ];
 
-const isDevelopment = NODE_ENV === 'development';
+if (!isDevelopment) {
+	plugins.push(
+		new MiniCssExtractPlugin({
+			filename: '[name].[contenthash:8].css',
+			chunkFilename: '[name].[contenthash:8].css',
+		}),
+	);
+	plugins.push(
+		new CompressionPlugin({
+			filename: '[path].gz[query]',
+			algorithm: 'gzip',
+			test: /\.js$|\.css$|\.html$/,
+			threshold: 10240,
+			minRatio: 0.8,
+		}),
+	);
+	plugins.push(
+		new CompressionPlugin({
+			filename: '[path].br[query]',
+			algorithm: 'brotliCompress',
+			test: /\.(js|css|html|svg)$/,
+			compressionOptions: {
+				level: 11,
+			},
+			threshold: 10240,
+			minRatio: 0.8,
+		}),
+	);
+}
 
 module.exports = {
 	entry: [path.resolve(__dirname, 'app/src/index.js')],
 	output: {
 		path: path.resolve(__dirname, 'dist/app'),
 		publicPath: '/',
-		filename: isDevelopment ? '[name].js' : '[name].[chunkhash:8].js',
+		filename: isDevelopment ? '[name].js' : '[name].[contenthash:8].js',
+		chunkFilename: isDevelopment
+			? '[name].bundle.js'
+			: '[name].[contenthash:8].js',
 	},
 	optimization: {
+		moduleIds: 'hashed',
+		runtimeChunk: {
+			name: 'manifest',
+		},
+		minimizer: isDevelopment
+			? []
+			: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
 		splitChunks: {
-			chunks: 'initial',
+			cacheGroups: {
+				// Splitting React into a different bundle
+				common: {
+					test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
+					name: 'common',
+					chunks: 'all',
+				},
+			},
 		},
 	},
 	plugins,
@@ -57,12 +108,9 @@ module.exports = {
 			{
 				test: /\.css$/,
 				use: [
-					{
-						loader: 'style-loader',
-						options: {
-							insertAt: 'top',
-						},
-					},
+					isDevelopment
+						? 'style-loader'
+						: MiniCssExtractPlugin.loader,
 					'css-loader',
 				],
 			},