浏览代码

[frontend] Optimize webpack build performance

Johan Åhlén 4 年之前
父节点
当前提交
e8be679e36
共有 8 个文件被更改,包括 96 次插入57 次删除
  1. 0 39
      .babelrc
  2. 1 1
      .circleci/config.yml
  3. 1 1
      .github/workflows/commitflow.yml
  4. 1 1
      Makefile
  5. 1 1
      Makefile.tarball
  6. 80 0
      babel.config.js
  7. 4 1
      desktop/core/src/desktop/js/webpack/configUtils.js
  8. 8 13
      webpack.config.js

+ 0 - 39
.babelrc

@@ -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"
-      ]
-    }
-  }
-}

+ 1 - 1
.circleci/config.yml

@@ -69,7 +69,7 @@ jobs:
 
 
             cd /usr/share/hue
             cd /usr/share/hue
             # make npm-install # Not available
             # make npm-install # Not available
-            cp ~/repo/.babelrc .
+            cp ~/repo/babel.config.js .
             cp ~/repo/tsconfig.json .
             cp ~/repo/tsconfig.json .
             cp ~/repo/jest.config.js .
             cp ~/repo/jest.config.js .
             cp ~/repo/.pylintrc .
             cp ~/repo/.pylintrc .

+ 1 - 1
.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
         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
         # make npm-install # Not available
-        cp .babelrc /usr/share/hue
+        cp babel.config.js /usr/share/hue
         cp tsconfig.json /usr/share/hue
         cp tsconfig.json /usr/share/hue
         cp jest.config.js /usr/share/hue
         cp jest.config.js /usr/share/hue
         cp .pylintrc /usr/share/hue
         cp .pylintrc /usr/share/hue

+ 1 - 1
Makefile

@@ -230,7 +230,7 @@ install-env:
 	cp $(ROOT)/package.json $(INSTALL_DIR)
 	cp $(ROOT)/package.json $(INSTALL_DIR)
 	cp $(ROOT)/package-lock.json $(INSTALL_DIR)
 	cp $(ROOT)/package-lock.json $(INSTALL_DIR)
 	cp $(ROOT)/webpack.config*.js $(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)
 	cp $(ROOT)/tsconfig.json $(INSTALL_DIR)
 	$(MAKE) -C $(INSTALL_DIR) npm-install
 	$(MAKE) -C $(INSTALL_DIR) npm-install
 	@if [ "$(MAKECMDGOALS)" = "install" ]; then \
 	@if [ "$(MAKECMDGOALS)" = "install" ]; then \

+ 1 - 1
Makefile.tarball

@@ -36,7 +36,7 @@ PROD_INCLUDES := \
 	package.json \
 	package.json \
 	package-lock.json \
 	package-lock.json \
 	webpack.config*.js \
 	webpack.config*.js \
-	.babelrc \
+	babel.config.js \
 	tsconfig.json
 	tsconfig.json
 
 
 # Check for things in BDIST_EXCLUDES in various apps
 # Check for things in BDIST_EXCLUDES in various apps

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

+ 4 - 1
desktop/core/src/desktop/js/webpack/configUtils.js

@@ -28,10 +28,13 @@ const BUNDLES = {
 
 
 const getPluginConfig = (name, withAnalyzer) => {
 const getPluginConfig = (name, withAnalyzer) => {
   const plugins = [
   const plugins = [
+    new webpack.ProgressPlugin(),
     new webpack.SourceMapDevToolPlugin({
     new webpack.SourceMapDevToolPlugin({
+      exclude: [/-parser-/g],
       filename: `${name}/[file].map`,
       filename: `${name}/[file].map`,
       publicPath: `/static/desktop/js/bundles/${name}/`,
       publicPath: `/static/desktop/js/bundles/${name}/`,
-      fileContext: 'public'
+      fileContext: 'public',
+      columns: false
     }),
     }),
     new RelativeBundleTracker({
     new RelativeBundleTracker({
       path: '.',
       path: '.',

+ 8 - 13
webpack.config.js

@@ -22,7 +22,6 @@ const {
   splitChunksName
   splitChunksName
 } = require('./desktop/core/src/desktop/js/webpack/configUtils');
 } = require('./desktop/core/src/desktop/js/webpack/configUtils');
 
 
-process.traceDeprecation = true;
 const config = {
 const config = {
   devtool: false,
   devtool: false,
   entry: {
   entry: {
@@ -40,31 +39,27 @@ const config = {
     rules: [
     rules: [
       {
       {
         test: /\.vue$/,
         test: /\.vue$/,
+        exclude: /node_modules/,
         use: 'vue-loader'
         use: 'vue-loader'
       },
       },
       {
       {
-        test: /\.tsx?$/,
+        test: /\.(jsx?|tsx?)$/,
         exclude: /node_modules/,
         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/,
         exclude: /node_modules/,
-        use: ['babel-loader']
+        use: { loader: 'html', options: { interpolater: true, removeComments: false } }
       }
       }
     ]
     ]
   },
   },
   optimization: {
   optimization: {
-    //minimize: true,
     minimize: false,
     minimize: false,
     splitChunks: {
     splitChunks: {
       chunks: 'all',
       chunks: 'all',