ci: speed up script tag e2e tests (#1032)

* show package bundle progress

* Ability to run "quick builds" for faster feedback on status checks (e2e)

* ci: speed up PR checks

* specify quick build value

.circleci/config.yml

@@ -151,7 +151,7 @@ jobs:
       - codecov/upload:
           file: '/home/circleci/repo/platform/core/coverage/reports'
           flags: 'core'
-      
+
       # Persist :+1:
       - persist_to_workspace: &persist_to_workspace
           root: ~/repo
@@ -204,7 +204,7 @@ jobs:
       - attach_workspace:
           at: ~/repo
       - setup_remote_docker:
-         docker_layer_caching: false
+          docker_layer_caching: false
       - run:
           name: Build and push Docker image
           command: |
@@ -294,7 +294,7 @@ workflows:
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: yarn run build:e2e
+          build: npx cross-env QUICK_BUILD=true yarn run build
           start: yarn run test:e2e:serve
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'
@@ -313,7 +313,7 @@ workflows:
           yarn: true
           store_artifacts: false
           working_directory: platform/viewer
-          build: yarn run build:package
+          build: npx cross-env QUICK_BUILD=true yarn run build:package
           start: yarn run test:e2e:serve
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-{{ checksum "yarn.lock" }}'

.webpack/webpack.base.js

@@ -1,23 +1,46 @@
 const path = require('path');
 const webpack = require('webpack');
+// ~~ RULES
 const loadShadersRule = require('./rules/loadShaders.js');
 const loadWebWorkersRule = require('./rules/loadWebWorkers.js');
 const transpileJavaScriptRule = require('./rules/transpileJavaScript.js');
+// ~~ PLUGINS
+const TerserJSPlugin = require('terser-webpack-plugin');
+// ~~ ENV VARS
+const NODE_ENV = process.env.NODE_ENV;
+const QUICK_BUILD = process.env.QUICK_BUILD;
 
 module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
   if (!process.env.NODE_ENV) {
     throw new Error('process.env.NODE_ENV not set');
   }
 
-  const mode =
+  const mode = NODE_ENV === 'production' ? 'production' : 'development';
-    process.env.NODE_ENV === 'production' ? 'production' : 'development';
+  const isProdBuild = NODE_ENV === 'production';
+  const isQuickBuild = QUICK_BUILD === 'true';
 
-  return {
+  const config = {
-    mode,
+    mode: isProdBuild ? 'production' : 'development',
+    devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
     entry: {
       app: `${SRC_DIR}/index.js`,
     },
+    optimization: {
+      minimize: isProdBuild,
+      sideEffects: true,
+    },
     context: SRC_DIR,
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
     module: {
       rules: [
         transpileJavaScriptRule(mode),
@@ -53,4 +76,23 @@ module.exports = (env, argv, { SRC_DIR, DIST_DIR }) => {
       fs: 'empty',
     },
   };
+
+  if (isProdBuild) {
+    config.optimization.minimizer = [
+      new TerserJSPlugin({
+        // Supports:
+        // source-map and inline-source-map
+        sourceMap: isProdBuild && !isQuickBuild,
+        parallel: true,
+        terserOptions: {},
+      }),
+    ];
+  }
+
+  if (isQuickBuild) {
+    config.optimization.minimize = false;
+    config.devtool = false;
+  }
+
+  return config;
 };

package.json

@@ -13,7 +13,6 @@
   "scripts": {
     "cm": "npx git-cz",
     "build": "lerna run build:viewer --stream",
-    "build:e2e": "lerna run build:viewer:e2e --stream",
     "build:ci": "lerna run build:viewer:ci --stream",
     "build:demo": "lerna run build:viewer:demo --stream",
     "build:package": "lerna run build:viewer:package --stream",

platform/viewer/.webpack/webpack.commonjs.js

@@ -1,8 +1,9 @@
+// ~~ WebPack
 const webpack = require('webpack');
 const path = require('path');
 const merge = require('webpack-merge');
 const webpackCommon = require('./../../../.webpack/webpack.commonjs.js');
-//
+// ~~ Plugins
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const fontsToJavaScriptRule = require('./rules/fontsToJavaScript.js');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -12,31 +13,14 @@ const DIST_DIR = path.join(__dirname, '../dist');
 const PUBLIC_DIR = path.join(__dirname, '../public');
 // ~~ Env Vars
 const HTML_TEMPLATE = process.env.HTML_TEMPLATE || 'script-tag.html';
-const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 
 module.exports = (env, argv) => {
   const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
 
-  return merge(commonConfig, {
+  const mergedConfig = merge(commonConfig, {
     entry: {
       app: `${SRC_DIR}/index-umd.js`,
     },
-    devtool: 'source-map',
-    stats: {
-      colors: true,
-      hash: true,
-      timings: true,
-      assets: true,
-      chunks: false,
-      chunkModules: false,
-      modules: false,
-      children: false,
-      warnings: true,
-    },
-    optimization: {
-      minimize: true,
-      sideEffects: true,
-    },
     output: {
       path: DIST_DIR,
       library: 'OHIFViewer',
@@ -50,14 +34,17 @@ module.exports = (env, argv) => {
       // Clean output.path
       new CleanWebpackPlugin(),
       // Generate "index.html" w/ correct includes/imports
+      // NOTE: We use this for E2E Tests
       new HtmlWebpackPlugin({
         inject: false,
         template: `${PUBLIC_DIR}/html-templates/${HTML_TEMPLATE}`,
         filename: 'index.html',
       }),
       new webpack.optimize.LimitChunkCountPlugin({
-           maxChunks: 1
+        maxChunks: 1,
-       })
+      }),
     ],
   });
+
+  return mergedConfig;
 };

platform/viewer/.webpack/webpack.pwa.js

@@ -25,36 +25,18 @@ const PUBLIC_URL = process.env.PUBLIC_URL || '/';
 const APP_CONFIG = process.env.APP_CONFIG || 'config/default.js';
 const PROXY_TARGET = process.env.PROXY_TARGET;
 const PROXY_DOMAIN = process.env.PROXY_DOMAIN;
-const SKIP_MINIMIZE = process.env.SKIP_MINIMIZE;
 
 module.exports = (env, argv) => {
   const baseConfig = webpackBase(env, argv, { SRC_DIR, DIST_DIR });
   const isProdBuild = process.env.NODE_ENV === 'production';
   const hasProxy = PROXY_TARGET && PROXY_DOMAIN;
-  const skipMinimize = SKIP_MINIMIZE === 'true';
 
   const mergedConfig = merge(baseConfig, {
-    devtool: isProdBuild ? 'source-map' : 'cheap-module-eval-source-map',
     output: {
       path: DIST_DIR,
       filename: isProdBuild ? '[name].bundle.[chunkhash].js' : '[name].js',
       publicPath: PUBLIC_URL, // Used by HtmlWebPackPlugin for asset prefix
     },
-    stats: {
-      colors: true,
-      hash: true,
-      timings: true,
-      assets: true,
-      chunks: false,
-      chunkModules: false,
-      modules: false,
-      children: false,
-      warnings: true,
-    },
-    optimization: {
-      minimize: isProdBuild && !skipMinimize,
-      sideEffects: true,
-    },
     module: {
       rules: [...extractStyleChunksRule(isProdBuild)],
     },
@@ -131,15 +113,6 @@ module.exports = (env, argv) => {
 
   if (!isProdBuild) {
     mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-  } else {
-    mergedConfig.optimization.minimizer = [
-      new TerserJSPlugin({
-        sourceMap: true,
-        parallel: true,
-      }),
-      // No bueno
-      // new OptimizeCSSAssetsPlugin({}),
-    ];
   }
 
   return mergedConfig;

platform/viewer/package.json

@@ -17,11 +17,10 @@
   },
   "proxy": "http://localhost:8042",
   "scripts": {
-    "build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js",
+    "build:package": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.commonjs.js --progress",
     "build:viewer": "cross-env NODE_ENV=production node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
-    "build:viewer:e2e": "cross-env NODE_ENV=development node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js --progress",
+    "build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
-    "build:viewer:ci": "cross-env NODE_ENV=production PUBLIC_URL=/pwa/ APP_CONFIG=config/netlify.js SKIP_MINIMIZE=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --config .webpack/webpack.pwa.js",
+    "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html QUICK_BUILD=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
-    "build:viewer:demo": "cross-env NODE_ENV=production APP_CONFIG=config/demo.js HTML_TEMPLATE=rollbar.html SKIP_MINIMIZE=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js",
     "build:viewer:package": "yarn run build:package",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config .webpack/webpack.pwa.js --watch",
     "dev:orthanc": "cross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js --watch",