From e8be679e3663257a27f4572d8d8d33940d415283 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20A=CC=8Ahle=CC=81n?= Date: Tue, 1 Jun 2021 13:57:37 +0200 Subject: [PATCH] [frontend] Optimize webpack build performance --- .babelrc | 39 --------- .circleci/config.yml | 2 +- .github/workflows/commitflow.yml | 2 +- Makefile | 2 +- Makefile.tarball | 2 +- babel.config.js | 80 +++++++++++++++++++ .../src/desktop/js/webpack/configUtils.js | 5 +- webpack.config.js | 21 ++--- 8 files changed, 96 insertions(+), 57 deletions(-) delete mode 100644 .babelrc create mode 100644 babel.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 5580294cf9e..00000000000 --- a/.babelrc +++ /dev/null @@ -1,39 +0,0 @@ -{ - "presets": [ - "babel-preset-typescript-vue3", - "@babel/typescript", - "@babel/preset-env" - ], - "plugins": [ - ["module-resolver", { - "root": ["./desktop/core/src/desktop/js"] - }], - "@babel/plugin-syntax-dynamic-import", - ["@babel/plugin-proposal-decorators", { - "legacy": true - }], - ["@babel/proposal-class-properties", { - "loose": true - }], - ["@babel/plugin-proposal-private-methods", { "loose": true }], - "@babel/proposal-object-rest-spread" - ], - "overrides": [{ - "test": "./desktop/core/src/desktop/js/parse/sqlAutocompleteParser.js", - "compact": false - },{ - "test": "./desktop/core/src/desktop/js/parse/sqlSyntaxParser.js", - "compact": false - }], - "env": { - "test": { - "presets": ["@babel/typescript", "@babel/preset-env"], - "plugins": [ - ["module-resolver", { - "root": ["./desktop/core/src/desktop/js"] - }], - "@babel/plugin-syntax-dynamic-import" - ] - } - } -} diff --git a/.circleci/config.yml b/.circleci/config.yml index 8c6a462e769..7773fd6f7c6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -69,7 +69,7 @@ jobs: cd /usr/share/hue # make npm-install # Not available - cp ~/repo/.babelrc . + cp ~/repo/babel.config.js . cp ~/repo/tsconfig.json . cp ~/repo/jest.config.js . cp ~/repo/.pylintrc . diff --git a/.github/workflows/commitflow.yml b/.github/workflows/commitflow.yml index 5a5bd0c8629..63454a0c20b 100644 --- a/.github/workflows/commitflow.yml +++ b/.github/workflows/commitflow.yml @@ -55,7 +55,7 @@ jobs: sed -i 's/## has_iam_detection=true/ has_iam_detection=false/g' /usr/share/hue/desktop/conf/pseudo-distributed.ini # make npm-install # Not available - cp .babelrc /usr/share/hue + cp babel.config.js /usr/share/hue cp tsconfig.json /usr/share/hue cp jest.config.js /usr/share/hue cp .pylintrc /usr/share/hue diff --git a/Makefile b/Makefile index a196c14f039..f1a9393daa2 100644 --- a/Makefile +++ b/Makefile @@ -230,7 +230,7 @@ install-env: cp $(ROOT)/package.json $(INSTALL_DIR) cp $(ROOT)/package-lock.json $(INSTALL_DIR) cp $(ROOT)/webpack.config*.js $(INSTALL_DIR) - cp $(ROOT)/.babelrc $(INSTALL_DIR) + cp $(ROOT)/babel.config.js $(INSTALL_DIR) cp $(ROOT)/tsconfig.json $(INSTALL_DIR) $(MAKE) -C $(INSTALL_DIR) npm-install @if [ "$(MAKECMDGOALS)" = "install" ]; then \ diff --git a/Makefile.tarball b/Makefile.tarball index b6453e8f6a5..ec645dea8ed 100644 --- a/Makefile.tarball +++ b/Makefile.tarball @@ -36,7 +36,7 @@ PROD_INCLUDES := \ package.json \ package-lock.json \ webpack.config*.js \ - .babelrc \ + babel.config.js \ tsconfig.json # Check for things in BDIST_EXCLUDES in various apps diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 00000000000..b96b2212e33 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,80 @@ +// Licensed to Cloudera, Inc. under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. Cloudera, Inc. licenses this file +// to you under the Apache License, Version 2.0 (the +// "License"); you may not use this file except in compliance +// with the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +const aceRegex = /.*\/js\/ext\/ace\/ace.js$/; +const parserFileRegex = /.*desktop\/js\/parse\/.*Parser.js$/; + +module.exports = function (api) { + api.cache(true); + api.assertVersion('^7.4.5'); + + const presets = ['babel-preset-typescript-vue3', '@babel/typescript', '@babel/preset-env']; + const plugins = [ + [ + 'module-resolver', + { + root: ['./desktop/core/src/desktop/js'] + } + ], + '@babel/plugin-syntax-dynamic-import', + [ + '@babel/plugin-proposal-decorators', + { + legacy: true + } + ], + [ + '@babel/proposal-class-properties', + { + loose: true + } + ], + ['@babel/plugin-proposal-private-methods', { loose: true }], + '@babel/proposal-object-rest-spread' + ]; + + const overrides = [ + { + test: parserFileRegex, + compact: false + }, + { + test: aceRegex, + compact: false + } + ]; + const env = { + test: { + presets: ['@babel/typescript', '@babel/preset-env'], + plugins: [ + [ + 'module-resolver', + { + root: ['./desktop/core/src/desktop/js'] + } + ], + '@babel/plugin-syntax-dynamic-import' + ] + } + }; + + return { + env, + overrides, + presets, + plugins + }; +}; diff --git a/desktop/core/src/desktop/js/webpack/configUtils.js b/desktop/core/src/desktop/js/webpack/configUtils.js index 6490e355984..29743871c89 100644 --- a/desktop/core/src/desktop/js/webpack/configUtils.js +++ b/desktop/core/src/desktop/js/webpack/configUtils.js @@ -28,10 +28,13 @@ const BUNDLES = { const getPluginConfig = (name, withAnalyzer) => { const plugins = [ + new webpack.ProgressPlugin(), new webpack.SourceMapDevToolPlugin({ + exclude: [/-parser-/g], filename: `${name}/[file].map`, publicPath: `/static/desktop/js/bundles/${name}/`, - fileContext: 'public' + fileContext: 'public', + columns: false }), new RelativeBundleTracker({ path: '.', diff --git a/webpack.config.js b/webpack.config.js index a992ca6be29..faeb9a8df80 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,7 +22,6 @@ const { splitChunksName } = require('./desktop/core/src/desktop/js/webpack/configUtils'); -process.traceDeprecation = true; const config = { devtool: false, entry: { @@ -40,31 +39,27 @@ const config = { rules: [ { test: /\.vue$/, + exclude: /node_modules/, use: 'vue-loader' }, { - test: /\.tsx?$/, + test: /\.(jsx?|tsx?)$/, exclude: /node_modules/, - loader: 'babel-loader' + use: ['source-map-loader', 'babel-loader'] }, - { test: /\.js$/, use: ['source-map-loader'], enforce: 'pre' }, { - test: /\.(html)$/, - use: [{ loader: 'html', options: { interpolater: true, removeComments: false } }] + test: /\.scss$/, + exclude: /node_modules/, + use: ['style-loader', 'css-loader', 'sass-loader'] }, - { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, - { test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, - { test: /\.css$/, use: ['style-loader', 'css-loader'] }, - { test: /\.(woff2?|ttf|eot|svg)$/, use: ['file-loader'] }, { - test: /\.jsx?$/, + test: /\.html$/, exclude: /node_modules/, - use: ['babel-loader'] + use: { loader: 'html', options: { interpolater: true, removeComments: false } } } ] }, optimization: { - //minimize: true, minimize: false, splitChunks: { chunks: 'all',