From ceb683715334718080c0cf6f825a8588a80a2e4e Mon Sep 17 00:00:00 2001 From: Danny Brown Date: Fri, 11 Oct 2019 14:26:24 -0400 Subject: [PATCH] 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 | 8 ++-- .webpack/webpack.base.js | 50 ++++++++++++++++++-- package.json | 1 - platform/viewer/.webpack/webpack.commonjs.js | 29 ++++-------- platform/viewer/.webpack/webpack.pwa.js | 27 ----------- platform/viewer/package.json | 7 ++- 6 files changed, 61 insertions(+), 61 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 0735ed6c7..d484a1b0d 100644 --- a/.circleci/config.yml +++ b/.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" }}' diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js index 056ea9596..bdc6c25ae 100644 --- a/.webpack/webpack.base.js +++ b/.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 = - process.env.NODE_ENV === 'production' ? 'production' : 'development'; + const mode = NODE_ENV === 'production' ? 'production' : 'development'; + const isProdBuild = NODE_ENV === 'production'; + const isQuickBuild = QUICK_BUILD === 'true'; - return { - mode, + const config = { + 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; }; diff --git a/package.json b/package.json index 574b57606..865854980 100644 --- a/package.json +++ b/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", diff --git a/platform/viewer/.webpack/webpack.commonjs.js b/platform/viewer/.webpack/webpack.commonjs.js index f54ebb35e..8ae080693 100644 --- a/platform/viewer/.webpack/webpack.commonjs.js +++ b/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; }; diff --git a/platform/viewer/.webpack/webpack.pwa.js b/platform/viewer/.webpack/webpack.pwa.js index d74f6b0cc..667b0ec71 100644 --- a/platform/viewer/.webpack/webpack.pwa.js +++ b/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; diff --git a/platform/viewer/package.json b/platform/viewer/package.json index 0d8643ddc..35c58ad10 100644 --- a/platform/viewer/package.json +++ b/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 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 SKIP_MINIMIZE=true node --max_old_space_size=4096 ./../../node_modules/webpack/bin/webpack.js --progress --config .webpack/webpack.pwa.js", + "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: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: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",