Web Portal: Optimize speed of `npm start` #1021

Gerhut · 2018-07-31T07:29:18Z

Move npm run build run in image build stage, decouple with env.
Inject env to window.ENV in env.js, refernced by all pages.
Rename webportal.config.json to js, which exports window.ENV.

Closes #936

coveralls · 2018-07-31T07:34:22Z

Coverage decreased (-11.7%) to 51.84% when pulling dea6d32 on qixcheng/web-portal/optimize-boot-speed into 2aa9b06 on master.

Gerhut · 2018-08-01T01:36:15Z

Docs will be updated after #1000 merged

sterowang

hwuu · 2018-08-01T05:44:59Z

webportal/package.json

    "test": "npm run lint",
-    "webpack": "webpack --config webpack.config.js --progress --profile",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean && node config/preprocess.js",


When are prebuild and prestart called?

@hwuu They run automatically just before build & start

https://docs.npmjs.com/misc/scripts

hwuu · 2018-08-01T05:49:56Z

webportal/src/app/layout/layout.component.ejs

@@ -114,6 +114,6 @@
    <div class="control-sidebar-bg"></div>

  </div>
-
+  <script src="scripts/env.js"></script>


Why do you add this to this .ejs file? I'm wondering whether 'require' the .js file in job-view.component.js is sufficient?

@hwuu layout.component.ejs is the base template of all html pages, it makes all page scripts can access window.ENV by require('webportal.config.js')

hwuu · 2018-08-01T05:52:28Z

webportal/src/app/env.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+window.ENV = {


I'm curious about how your method works. I guess this env.js is a template, and it will be dynamically instantiated by envsub inside the container before the service starts (the 'prestart' command of npm). Am I right?

@hwuu You are right, this makes the environment variables injected to window.ENV in the runtime, not related to webpack build.

hwuu · 2018-08-01T05:55:11Z

webportal/src/app/cluster-view/hardware/hardware-detail.component.js

@@ -19,7 +19,7 @@

 const hardwareDetailComponent = require('./hardware-detail.component.ejs');
 const breadcrumbComponent = require('../../job/breadcrumb/breadcrumb.component.ejs');
-const webportalConfig = require('../../config/webportal.config.json');
+const webportalConfig = require('../../config/webportal.config.js');


Is it a common practice that we'd better 'require' a .js file other than a .json file?

@hwuu In fact require('webportal.config') is better, it will make webpack to choose the most suitable extension, even .ts if exists and related plugin is used.

Thanks for your clarification. All clear. Approved.

Gerhut · 2018-08-02T08:38:53Z

Benchmarks:

Optimization \ Stage	Build	Run
without	56.738s	30.9s
with	1:32.97s	0.3s

Build:

time docker build --tag webportal .
Record total seconds

Run:

docker run --detach --name container_name image_tag
docker logs --timestamp container_name
Record timestamp of first line & listening line, calculate difference

1. Move `npm run build` run in image build stage, decouple with env. 2. Inject env to `window.ENV` in `env.js`, refernced by all pages. 3. Rename `webportal.config.json` to js, which exports `window.ENV`.

hwuu · 2018-08-02T11:25:32Z

webportal/package.json

@@ -74,7 +74,7 @@
    "prebuild": "npm run clean && node config/preprocess.js",
    "build": "webpack --config webpack.config.js --progress --profile",
    "build:dev": "npm run build -- --debug --devtool eval-cheap-module-source-map --output-pathinfo --watch",
-    "prestart": "envsub --env-file .env --system src/app/env.js dist/scripts/env.js",
+    "prestart": "envsub --env-file .env --system src/app/env.js dist/scripts/env.js && ping -c 1 -W 1 172.17.0.1",


Explain a little?

It's a workaround to pass the cluster deploy test in Jenkins, not related to this optimization. I will revert it and raise a new PR to discuss it.

This reverts commit 90b380e.

This reverts commit 2c66734.

Gerhut requested review from hwuu and abuccts July 31, 2018 07:29

Gerhut mentioned this pull request Aug 1, 2018

Optimize boot speed of Web Portal #936

Closed

sterowang approved these changes Aug 1, 2018

View reviewed changes

hwuu reviewed Aug 1, 2018

View reviewed changes

hwuu approved these changes Aug 1, 2018

View reviewed changes

Gerhut added 2 commits August 2, 2018 16:50

Web Portal: Optimize speed of npm start

63c798a

1. Move `npm run build` run in image build stage, decouple with env. 2. Inject env to `window.ENV` in `env.js`, refernced by all pages. 3. Rename `webportal.config.json` to js, which exports `window.ENV`.

lint

4f2e62c

Gerhut force-pushed the qixcheng/web-portal/optimize-boot-speed branch 2 times, most recently from 5016861 to 2bee67c Compare August 2, 2018 10:03

ping before start

90b380e

Gerhut force-pushed the qixcheng/web-portal/optimize-boot-speed branch from 2bee67c to 90b380e Compare August 2, 2018 10:18

hwuu reviewed Aug 2, 2018

View reviewed changes

Gerhut added 2 commits August 2, 2018 22:34

README

1afc485

Revert "ping before start"

dea6d32

This reverts commit 90b380e.

Gerhut merged commit 2c66734 into master Aug 3, 2018

Gerhut deleted the qixcheng/web-portal/optimize-boot-speed branch August 3, 2018 02:09

Gerhut added a commit that referenced this pull request Aug 6, 2018

Revert "Web Portal: Optimize speed of npm start (#1021)"

8f113f1

This reverts commit 2c66734.

scarlett2018 mentioned this pull request Aug 22, 2018

draft a release in pai-0.7.y #1107

Closed

Gerhut mentioned this pull request Sep 6, 2018

webportal runtime takes only 1G, but compile takes 8G #1154

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web Portal: Optimize speed of `npm start` #1021

Web Portal: Optimize speed of `npm start` #1021

Gerhut commented Jul 31, 2018 •

edited

Loading

coveralls commented Jul 31, 2018 •

edited

Loading

Gerhut commented Aug 1, 2018

sterowang left a comment

hwuu Aug 1, 2018

Gerhut Aug 1, 2018 •

edited

Loading

hwuu Aug 1, 2018

Gerhut Aug 1, 2018

hwuu Aug 1, 2018 •

edited

Loading

Gerhut Aug 1, 2018

hwuu Aug 1, 2018

Gerhut Aug 1, 2018

hwuu Aug 1, 2018

Gerhut commented Aug 2, 2018 •

edited

Loading

hwuu Aug 2, 2018

Gerhut Aug 2, 2018

Web Portal: Optimize speed of npm start #1021

Web Portal: Optimize speed of npm start #1021

Conversation

Gerhut commented Jul 31, 2018 • edited Loading

coveralls commented Jul 31, 2018 • edited Loading

Gerhut commented Aug 1, 2018

sterowang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gerhut Aug 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwuu Aug 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gerhut commented Aug 2, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Web Portal: Optimize speed of `npm start` #1021

Web Portal: Optimize speed of `npm start` #1021

Gerhut commented Jul 31, 2018 •

edited

Loading

coveralls commented Jul 31, 2018 •

edited

Loading

Gerhut Aug 1, 2018 •

edited

Loading

hwuu Aug 1, 2018 •

edited

Loading

Gerhut commented Aug 2, 2018 •

edited

Loading