diff --git a/deploy/build.bat b/deploy/build.bat index faa44fba27..14fd114a44 100644 --- a/deploy/build.bat +++ b/deploy/build.bat @@ -37,7 +37,7 @@ cd ..\webapp call yarn call lerna bootstrap -call lerna run build --stream --scope=@cloudbeaver/product-default +call lerna run build --stream --scope=@cloudbeaver/product-default -- -- --mode=production cd ..\deploy diff --git a/deploy/build.sh b/deploy/build.sh index ac878739a4..8b92bbf8d1 100755 --- a/deploy/build.sh +++ b/deploy/build.sh @@ -37,7 +37,7 @@ cd ../webapp yarn lerna run bootstrap -lerna run build --stream --scope=@cloudbeaver/product-default +lerna run build --stream --scope=@cloudbeaver/product-default -- -- --mode=production cd ../deploy diff --git a/webapp/configs/babel.config.js b/webapp/configs/babel.config.js index 6c7ddefcb8..63b4aaa9c1 100644 --- a/webapp/configs/babel.config.js +++ b/webapp/configs/babel.config.js @@ -15,16 +15,18 @@ console.warn = (...args) => { }; module.exports = { + compact: prod, presets: [ - ['@babel/preset-typescript', { isTSX: true, allExtensions: true }], "@babel/preset-react", + ['@babel/preset-typescript', { isTSX: true, allExtensions: true }], [ "@babel/preset-env", { - "targets": { - // "esmodules": true, - browsers: ["last 2 chrome version", "last 2 firefox version"] - } + targets: { + esmodules: true, + }, + modules: false, + // "useBuiltIns": "usage" } ] ], @@ -34,10 +36,10 @@ module.exports = { '@babel/plugin-proposal-optional-chaining', ['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-class-properties', { loose: true }], + ["@babel/plugin-proposal-object-rest-spread", { loose: true, useBuiltIns: true }], 'react-require', - "@babel/proposal-object-rest-spread", 'reshadow/babel', - !prod && [ + /*!prod &&*/ [ "babel-plugin-module-resolver", { alias: { diff --git a/webapp/configs/webpack.config.js b/webapp/configs/webpack.config.js index de80966b1e..444e5f7023 100644 --- a/webapp/configs/webpack.config.js +++ b/webapp/configs/webpack.config.js @@ -1,5 +1,4 @@ const { resolve, join } = require('path'); -var PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin'); const ModuleDependencyWarning = require("webpack/lib/ModuleDependencyWarning"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); @@ -33,12 +32,6 @@ module.exports = (env, argv) => { const postCssPlugins = [ require('postcss-preset-env')({ stage: 0 }), - // require('@csstools/postcss-sass')({ - // sassOptions: { - // implementation: require('node-sass'), - // includePaths: ['node_modules', resolve('../../node_modules')] - // }, - // }), require('postcss-discard-comments'), require('reshadow/postcss')({ scopeBehaviour: moduleScope }) ]; @@ -93,9 +86,8 @@ module.exports = (env, argv) => { mode: argv.mode || 'development', resolve: { extensions: ['.ts', '.tsx', '.js'], - modules: [join(__dirname, '../node_modules')], + modules: [resolve('node_modules'), join(__dirname, '../node_modules')], alias: { - // "@cloudbeaver": resolve('../../node_modules/@cloudbeaver/'), react: 'preact/compat', react$: 'preact/compat', 'react-dom': 'preact/compat', @@ -150,7 +142,6 @@ module.exports = (env, argv) => { // ], devtool: 'cheap-module-source-map', plugins: [ - new PeerDepsExternalsPlugin(), new IgnoreNotFoundExportPlugin(), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output diff --git a/webapp/configs/webpack.plugin.config.js b/webapp/configs/webpack.plugin.config.js index b8fc22c825..6b790fffc6 100644 --- a/webapp/configs/webpack.plugin.config.js +++ b/webapp/configs/webpack.plugin.config.js @@ -1,5 +1,6 @@ const merge = require('webpack-merge'); const { resolve, join } = require('path'); +var PeerDepsExternalsPlugin = require('peer-deps-externals-webpack-plugin'); const commonConfig = require('./webpack.config.js'); var main = resolve('src/index.ts'); @@ -11,7 +12,7 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), { filename: 'index.js', chunkFilename: '[name].bundle.js', library: package.name, - libraryTarget: 'umd', + libraryTarget: 'commonjs', path: outputDir, }, optimization: { @@ -22,5 +23,7 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), { // namedModules: false, // concatenateModules: false, }, - plugins: [], + plugins: [ + new PeerDepsExternalsPlugin(), + ], }); diff --git a/webapp/configs/webpack.product.config.js b/webapp/configs/webpack.product.config.js index c9a794abf4..3121d9c0b4 100644 --- a/webapp/configs/webpack.product.config.js +++ b/webapp/configs/webpack.product.config.js @@ -1,7 +1,6 @@ const merge = require('webpack-merge'); const webpack = require('webpack'); -const { resolve, join } = require('path'); -const fs = require('fs'); +const { resolve } = require('path'); const commonConfig = require('./webpack.config.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); @@ -9,18 +8,6 @@ const CopyWebpackPlugin = require('copy-webpack-plugin'); var main = resolve('src/index.ts'); var outputDir = resolve('lib'); var package = require(resolve("package.json")) -var partsNameRegexp = /^@cloudbeaver\/.+$/ - -var deps = Object.keys(package.dependencies) - .filter(dep => partsNameRegexp.test(dep)) - .map(dep => { - const from = `./node_modules/${dep}/lib` - if (!fs.existsSync(from)) { - return false; - } - - return { from, to: `./${dep}`, force: true } - }) module.exports = (env, argv) => merge(commonConfig(env, argv), { entry: main, @@ -36,6 +23,7 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), { splitChunks: { chunks: 'all', }, + sideEffects: false, minimize: true, namedModules: true, concatenateModules: true, @@ -44,13 +32,12 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), { new CopyWebpackPlugin({ patterns: [ { from: './public', to: '', force: true }, - ].filter(Boolean) + ] }), new webpack.DefinePlugin({ version: JSON.stringify(package.buildVersion), }), new HtmlWebpackPlugin({ template: resolve('src/index.html.ejs'), }), - // new webpack.HotModuleReplacementPlugin(), // enable HMR globally new webpack.NamedModulesPlugin(), ], }); diff --git a/webapp/configs/webpack.product.dev.config.js b/webapp/configs/webpack.product.dev.config.js index 3bba50cac5..7141d79823 100644 --- a/webapp/configs/webpack.product.dev.config.js +++ b/webapp/configs/webpack.product.dev.config.js @@ -1,24 +1,12 @@ const merge = require('webpack-merge'); const webpack = require('webpack'); -const { resolve, join } = require('path'); -const fs = require('fs'); +const { resolve } = require('path'); const commonConfig = require('./webpack.config.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; var packageJson = require(resolve("package.json")) -var partsNameRegexp = /^@cloudbeaver\/.+$/ - -var deps = Object.keys(packageJson.dependencies) - .filter(dep => partsNameRegexp.test(dep)) - .map(dep => { - const from = `./node_modules/${dep}/lib` - if (!fs.existsSync(from)) { - return false; - } - - return { from, to: `./${dep}`, force: true } - }) module.exports = (env, argv) => merge(commonConfig(env, argv), { entry: [ @@ -38,14 +26,14 @@ module.exports = (env, argv) => merge(commonConfig(env, argv), { new CopyWebpackPlugin({ patterns: [ { from: './public', to: '', force: true }, - ].filter(Boolean) + ] }), new webpack.DefinePlugin({ - dbeaverPlugins: JSON.stringify(packageJson.dbeaverPlugins), version: JSON.stringify(packageJson.buildVersion), }), new HtmlWebpackPlugin({ template: resolve('src/index.html.ejs'), }), - // new webpack.HotModuleReplacementPlugin(), // enable HMR globally + new webpack.HotModuleReplacementPlugin(), // enable HMR globally new webpack.NamedModulesPlugin(), + // new BundleAnalyzerPlugin() ], }); diff --git a/webapp/package.json b/webapp/package.json index 23a7afd77b..90a2e7278e 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -24,6 +24,13 @@ "@types/react-dom": "^16.9.8", "@typescript-eslint/eslint-plugin": "^2.5.0", "@typescript-eslint/parser": "^2.8.0", + "babel-loader": "^8.0.6", + "babel-plugin-module-resolver": "^4.0.0", + "babel-plugin-react-require": "^3.1.3", + "babel-plugin-transform-typescript-metadata": "^0.3.0", + "copy-webpack-plugin": "^6.0.2", + "css-loader": "^3.2.1", + "declaration-bundler-webpack-plugin": "^1.0.3", "eslint": "^6.6.0", "eslint-config-airbnb-base": "^14.0.0", "eslint-import-resolver-typescript": "^2.0.0", @@ -34,14 +41,6 @@ "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.16.0", "eslint-plugin-react-hooks": "^1.7.0", - "babel-loader": "^8.0.6", - "babel-plugin-module-resolver": "^4.0.0", - "babel-plugin-react-require": "^3.1.3", - "babel-plugin-transform-typescript-metadata": "^0.3.0", - "babel-preset-latest": "^6.24.1", - "copy-webpack-plugin": "^6.0.2", - "css-loader": "^3.2.1", - "declaration-bundler-webpack-plugin": "^1.0.3", "html-webpack-plugin": "^4.3.0", "lerna": "^3.20.2", "mini-css-extract-plugin": "^0.9.0", @@ -62,6 +61,7 @@ "ts-loader": "^7.0.5", "typescript": "^3.8.3", "webpack": "4.43.0", + "webpack-bundle-analyzer": "^3.8.0", "webpack-cli": "3.3.11", "webpack-dev-server": "3.11.0", "webpack-merge": "4.2.2" diff --git a/webapp/packages/product-default/package.json b/webapp/packages/product-default/package.json index 165ce980f0..43caba5ac0 100644 --- a/webapp/packages/product-default/package.json +++ b/webapp/packages/product-default/package.json @@ -9,6 +9,8 @@ "prebuild": "rimraf lib/*", "build": "webpack --config ../../configs/webpack.product.config", "dev": "webpack-dev-server --progress --config=../../configs/webpack.product.dev.config --port=3100", + "analyse": "webpack --config ../../configs/webpack.product.config --profile --json > ./lib/stats.json", + "postanalyse": "webpack-bundle-analyzer ./lib/stats.json", "lint": "eslint ./src/ --ext .ts,.tsx", "lint-fix": "eslint ./src/ --ext .ts,.tsx --fix" }, diff --git a/webapp/packages/product-default/src/index.html.ejs b/webapp/packages/product-default/src/index.html.ejs index 1cb1dcb46c..0a01000589 100644 --- a/webapp/packages/product-default/src/index.html.ejs +++ b/webapp/packages/product-default/src/index.html.ejs @@ -1,22 +1,23 @@
- - - - - - - + + + + + + + +