[frontend] Optimize webpack build performance

.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 .

.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

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 \

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

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
+  };
+};

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: '.',

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',