Sfoglia il codice sorgente

HUE-8687 [frontend] Speed up bundle generation by separating workers and login generation

This adds: "npm run webpack-workers" and "npm run webpack-login"
Johan Ahlen 6 anni fa
parent
commit
251a654c5e

+ 1 - 1
.gitignore

@@ -106,7 +106,7 @@ dependency-reduced-pom.xml
 
 # Node Modules
 node_modules/
-webpack-stats.json
+webpack-stats*.json
 
 junitresults*
 

+ 2 - 0
Makefile

@@ -154,6 +154,8 @@ desktop: virtual-env
 apps: desktop
 	npm install
 	npm run webpack
+	npm run webpack-login
+	npm run webpack-workers
 	@$(MAKE) -C $(APPS_DIR) env-install
 
 ###################################

+ 9 - 1
desktop/core/src/desktop/settings.py

@@ -209,8 +209,16 @@ INSTALLED_APPS = [
 
 WEBPACK_LOADER = {
     'DEFAULT': {
-        'BUNDLE_DIR_NAME': 'desktop/js/bundles/',
+        'BUNDLE_DIR_NAME': 'desktop/js/bundles/hue/',
         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
+    },
+    'WORKERS': {
+        'BUNDLE_DIR_NAME': 'desktop/js/bundles/workers/',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-workers.json')
+    },
+    'LOGIN': {
+        'BUNDLE_DIR_NAME': 'desktop/js/bundles/login/',
+        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-login.json')
     }
 }
 

+ 1 - 1
desktop/core/src/desktop/templates/ace_sql_location_worker.mako

@@ -18,7 +18,7 @@
   from webpack_loader import utils
 %>
 
-% for js_file in utils.get_files('sqlLocationWebWorker'):
+% for js_file in utils.get_files('sqlLocationWebWorker', config='WORKERS'):
   importScripts('${ js_file.get('url') }');
 % endfor
 

+ 1 - 1
desktop/core/src/desktop/templates/ace_sql_syntax_worker.mako

@@ -18,7 +18,7 @@
   from webpack_loader import utils
 %>
 
-% for js_file in utils.get_files('sqlSyntaxWebWorker'):
+% for js_file in utils.get_files('sqlSyntaxWebWorker', config='WORKERS'):
   importScripts('${ js_file.get('url') }');
 % endfor
 

+ 1 - 1
desktop/core/src/desktop/templates/common_header.mako

@@ -132,7 +132,7 @@ if USE_NEW_EDITOR.get():
   % endif
 
   % if section == "login":
-    ${ render_bundle('login') | n,unicode }
+    ${ render_bundle('login', config='LOGIN') | n,unicode }
   %else:
     ${ render_bundle('vendors~hue~notebook') | n,unicode }
     ${ render_bundle('vendors~hue') | n,unicode }

+ 2 - 0
package.json

@@ -90,6 +90,8 @@
   "scripts": {
     "devinstall": "npm cache clean && npm install && npm prune",
     "webpack": "webpack --config webpack.config.js",
+    "webpack-login": "webpack --config webpack.config.login.js",
+    "webpack-workers": "webpack --config webpack.config.workers.js",
     "dev": "webpack --watch -d",
     "less": "./node_modules/.bin/grunt less",
     "less-dev": "./node_modules/.bin/grunt watch",

+ 4 - 9
webpack.config.js

@@ -23,21 +23,16 @@ module.exports = {
   },
   entry: {
     hue: ['./desktop/core/src/desktop/js/hue.js'],
-    login: ['./desktop/core/src/desktop/js/login.js'],
-    notebook: ['./desktop/core/src/desktop/js/apps/notebook/notebook.js'],
-    sqlLocationWebWorker: ['./desktop/core/src/desktop/js/sql/sqlLocationWebWorker.js'],
-    sqlSyntaxWebWorker: ['./desktop/core/src/desktop/js/sql/sqlSyntaxWebWorker.js'],
+    notebook: ['./desktop/core/src/desktop/js/apps/notebook/notebook.js']
   },
   optimization: {
     minimize: true,
     splitChunks: {
-      chunks (chunk) {
-        return chunk.name !== 'sqlSyntaxWebWorker' && chunk.name !== 'sqlLocationWebWorker' && chunk.name !== 'login';
-      }
+      chunks: 'all'
     }
   },
   output: {
-    path:  __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles',
+    path:  __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/hue',
     filename: '[name]-bundle-[hash].js'
   },
   module: {
@@ -58,7 +53,7 @@ module.exports = {
   plugins: [
     // new BundleAnalyzerPlugin({ analyzerPort: 9000 }),
     new CleanObsoleteChunks(),
-    new CleanWebpackPlugin([__dirname + '/desktop/core/src/desktop/static/desktop/js/bundles']),
+    new CleanWebpackPlugin([__dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/hue']),
     new BundleTracker({ filename: './webpack-stats.json' }),
     new webpack.BannerPlugin('\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n')
   ]

+ 56 - 0
webpack.config.login.js

@@ -0,0 +1,56 @@
+const webpack = require('webpack');
+const BundleTracker = require('webpack-bundle-tracker');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+  devtool: 'source-map',
+  mode: 'development',
+  performance: {
+    maxEntrypointSize: 400 * 1024, // 400kb
+    maxAssetSize: 400 * 1024 // 400kb
+  },
+  resolve: {
+    extensions: ['.json', '.jsx', '.js'],
+    modules: [
+      'node_modules',
+      'js'
+    ],
+    alias: {
+      'bootstrap': __dirname + '/node_modules/bootstrap-2.3.2/js'
+    }
+  },
+  entry: {
+    login: ['./desktop/core/src/desktop/js/login.js']
+  },
+  optimization: {
+    minimize: true,
+  },
+  output: {
+    path:  __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/login',
+    filename: '[name]-bundle-[hash].js'
+  },
+  module: {
+    rules: [
+      { test: /\.(html)$/, loader: 'html?interpolate&removeComments=false' },
+      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file-loader' },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      { include: /\.json$/, loaders: ['json-loader'] }
+    ]
+  },
+
+  plugins: [
+    // new BundleAnalyzerPlugin({ analyzerPort: 9000 }),
+    new CleanObsoleteChunks(),
+    new CleanWebpackPlugin([__dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/login']),
+    new BundleTracker({ filename: './webpack-stats-login.json' }),
+    new webpack.BannerPlugin('\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n')
+  ]
+};

+ 55 - 0
webpack.config.workers.js

@@ -0,0 +1,55 @@
+const webpack = require('webpack');
+const BundleTracker = require('webpack-bundle-tracker');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanObsoleteChunks = require('webpack-clean-obsolete-chunks');
+
+module.exports = {
+  devtool: 'source-map',
+  mode: 'development',
+  performance: {
+    maxEntrypointSize: 400 * 1024, // 400kb
+    maxAssetSize: 400 * 1024 // 400kb
+  },
+  resolve: {
+    extensions: ['.json', '.jsx', '.js'],
+    modules: [
+      'node_modules',
+      'js'
+    ],
+    alias: {
+      'bootstrap': __dirname + '/node_modules/bootstrap-2.3.2/js'
+    }
+  },
+  entry: {
+    sqlLocationWebWorker: ['./desktop/core/src/desktop/js/sql/sqlLocationWebWorker.js'],
+    sqlSyntaxWebWorker: ['./desktop/core/src/desktop/js/sql/sqlSyntaxWebWorker.js'],
+  },
+  optimization: {
+    minimize: true
+  },
+  output: {
+    path:  __dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/workers',
+    filename: '[name]-bundle-[hash].js'
+  },
+  module: {
+    rules: [
+      { test: /\.(html)$/, loader: 'html?interpolate&removeComments=false' },
+      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'file-loader' },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      { include: /\.json$/, loaders: ['json-loader'] }
+    ]
+  },
+
+  plugins: [
+    new CleanObsoleteChunks(),
+    new CleanWebpackPlugin([__dirname + '/desktop/core/src/desktop/static/desktop/js/bundles/workers/']),
+    new BundleTracker({ filename: './webpack-stats-workers.json' }),
+    new webpack.BannerPlugin('\nLicensed to Cloudera, Inc. under one\nor more contributor license agreements.  See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership.  Cloudera, Inc. licenses this file\nto you under the Apache License, Version 2.0 (the\n"License"); you may not use this file except in compliance\nwith the License.  You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an "AS IS" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n')
+  ]
+};