Webpack build optimize (#1877)

ui/client/package.json

@@ -167,6 +167,7 @@
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
+    "chalk": "^2.4.2",
     "color": "^3.1.3",
     "copy-webpack-plugin": "^8.1.1",
     "crypto-browserify": "^3.12.0",
@@ -213,6 +214,7 @@
     "react-refresh": "^0.10.0",
     "react-scrollbars-custom": "^4.0.25",
     "redux-mock-store": "^1.5.4",
+    "speed-measure-webpack-plugin": "^1.5.0",
     "start-server-and-test": "^1.12.5",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",

ui/client/progressBar.js

@@ -0,0 +1,54 @@
+const {repeat, padEnd, padStart, throttle} = require("lodash")
+const chalk = require("chalk")
+
+let interval
+let startTime = Date.now()
+
+const options = {
+  barLength: 40,
+  longTime: 40,
+  almostDone: .8,
+}
+
+function getElapsed() {
+  const {longTime} = options
+  const elapsed = Math.round((Date.now() - startTime) / 1000)
+  const elapsedColor = elapsed < longTime / 2 ? chalk.green : elapsed < longTime ? chalk.yellow : chalk.red
+  return elapsedColor(`${elapsed}s`)
+}
+
+function getBar(percentage) {
+  const {barLength, almostDone} = options
+  const bar = padEnd(repeat("◼︎", Math.ceil(percentage * barLength)), barLength, "□")
+  const barColor = percentage > almostDone ? chalk.green : percentage > almostDone * 2/3 ? chalk.yellow : chalk.red
+  return barColor(bar)
+}
+
+const getLine = (percentage, massage = "", ...args) => chalk.cyan([
+  `${padStart(Math.ceil(percentage * 100), 3)}%`,
+  getBar(percentage),
+  getElapsed(),
+  massage,
+  chalk.dim(args.filter(Boolean)),
+].join(" "))
+
+function render(...args) {
+  process.stdout.cursorTo(0)
+  process.stdout.clearLine()
+  process.stdout.write(getLine(...args))
+  process.stdout.cursorTo(0)
+}
+
+module.exports = throttle((percentage, ...args) => {
+  if (percentage <= 0) {
+    startTime = Date.now()
+  }
+
+  clearInterval(interval)
+  if (percentage < 1) {
+    interval = setInterval(() => render(percentage, ...args), 500)
+    render(percentage, ...args)
+  } else {
+    process.stdout.clearLine()
+  }
+}, 500)

ui/client/webpack.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable i18next/no-literal-string */
+const progressBar = require("./progressBar.js")
 const bootstrap = require("bootstrap")
 const path = require("path")
 const webpack = require("webpack")
@@ -12,14 +13,22 @@ const {camelCase} = require("lodash")
 const MomentLocalesPlugin = require("moment-locales-webpack-plugin")
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")
 const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin")
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
 
 const NODE_ENV = process.env.NODE_ENV || "development"
 const GIT_HASH = childProcess.execSync("git log -1 --format=%H").toString()
 const GIT_DATE = childProcess.execSync("git log -1 --format=%cd").toString()
 const isProd = NODE_ENV === "production"
+const isCi = process.env.CI === "true"
+
+const smp = new SpeedMeasurePlugin({
+  disable: true,
+  outputFormat: "humanVerbose",
+  loaderTopFiles: 5,
+})
 
 const {ModuleFederationPlugin} = webpack.container
-const {dependencies, name} = require("./package.json")
+const {name} = require("./package.json")
 const entry = {
   main: path.resolve(__dirname, "./init.js"),
 }
@@ -45,7 +54,7 @@ const fileLoader = {
   },
 }
 
-module.exports = {
+module.exports = smp.wrap({
   mode: NODE_ENV,
   optimization: {
     splitChunks: {
@@ -96,6 +105,7 @@ module.exports = {
     historyApiFallback: {
       index: "/static/main.html",
     },
+    overlay: {errors: true, warnings: false},
     hot: true,
     host: "0.0.0.0",
     disableHostCheck: true,
@@ -173,16 +183,10 @@ module.exports = {
       },
     }),
     // each 10% log entry in separate line - fix for travis no output problem
-    new webpack.ProgressPlugin((percentage, message, ...args) => {
-      const decimalPercentage = Math.ceil(percentage * 100)
-      if (this.previouslyPrintedPercentage == null || decimalPercentage >= this.previouslyPrintedPercentage + 10 || decimalPercentage === 100) {
-        console.log(` ${decimalPercentage}%`, message, ...args)
-        this.previouslyPrintedPercentage = decimalPercentage
-      }
-    }),
     new ForkTsCheckerWebpackPlugin(),
-    !isProd ? new ReactRefreshWebpackPlugin() : null,
-  ].filter(p => p !== null),
+    isProd ? null : new ReactRefreshWebpackPlugin(),
+    isCi ? null : new webpack.ProgressPlugin(progressBar),
+  ].filter(Boolean),
   module: {
     rules: [
       {
@@ -207,6 +211,7 @@ module.exports = {
       },
       {
         test: /\.[tj]sx?$/,
+        exclude: /node_modules/,
         use: ["babel-loader"],
       },
       {
@@ -229,11 +234,13 @@ module.exports = {
       {
         test: /\.css?$/,
         enforce: "pre",
+        exclude: /node_modules/,
         use: cssPreLoaders,
       },
       {
         test: /\.styl$/,
         enforce: "pre",
+        exclude: /node_modules/,
         use: [
           ...cssPreLoaders,
           {
@@ -249,6 +256,7 @@ module.exports = {
       {
         test: /\.less$/,
         enforce: "pre",
+        exclude: /node_modules/,
         use: [...cssPreLoaders, "less-loader"],
       },
       {
@@ -259,10 +267,10 @@ module.exports = {
         test: /\.(png|jpg)$/,
         use: [fileLoader],
       },
-
       {
         test: /\.svg$/,
         enforce: "pre",
+        exclude: /font/,
         use: [
           "svg-transform-loader",
           {
@@ -297,4 +305,4 @@ module.exports = {
       },
     ],
   },
-}
+})