Performance Enhancement & Size Reduction (#121)

- The size of the installed app is reduced from 400+MB to 190MB - UI re-render frequency is also reduced * feat: reduce re-render * chore: add dev tool entry in production * fix: reduce rebuilt size greatly It really cost me some time to figure out how to reduce the app.asar size. And it turns out that I have some misunderstanding about dependencies setting in the package.json. This is super awkward TAT! * chore: made app size much smaller than before (400mb -> 200mb) * chore: enable tree shaking, replace lodash with lodash-es reduce built size greatly
zxch3n · Dec 13, 2019 · 8e19119 · 8e19119
1 parent 59b8348
commit 8e19119
Show file tree

Hide file tree

Showing 34 changed files with 1,005 additions and 667 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    [ "@babel/preset-env", { "modules": false } ]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,5 @@ yarn.error
 junit.xml
 *.DS_Store
 .token
-dev-app-update.yml
+dev-app-update.yml
+webpack-visualization/
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "build-main": "cross-env NODE_ENV=production webpack --config webpack.main.prod.config.js",
     "build-renderer": "cross-env NODE_ENV=production webpack --config webpack.renderer.prod.config.js",
     "prebuild": "rm -rf ./dist",
-    "build": "npm run build-main && npm run build-renderer",
+    "build": "concurrently \"npm:build-main\" \"npm:build-renderer\"",
     "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.renderer.dev.config.js",
     "start-main-dev": "webpack --config webpack.main.config.js &&cross-env NODE_OPTIONS=--experimental-worker electron .",
     "start-dev": "cross-env NODE_ENV=development START_HOT=1 npm run start-renderer-dev",
@@ -90,6 +90,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@babel/runtime": "^7.5.5",
     "@hot-loader/react-dom": "^16.8.6",
     "@jest-runner/electron": "^2.0.2",
     "@svgr/webpack": "^4.3.2",
@@ -113,34 +114,54 @@
     "@types/styled-components": "^4.1.16",
     "@types/webdriverio": "^4.8.7",
     "@types/webpack-env": "^1.13.3",
+    "antd": "^3.19.7",
     "babel-loader": "^8.0.6",
+    "classnames": "^2.2.6",
     "codecov": "^3.5.0",
+    "concurrently": "^5.0.1",
     "cross-env": "^5.1.3",
-    "css-loader": "^2.1.1",
+    "deox": "^2.1.0",
+    "echarts": "^4.5.0",
+    "echarts-for-react": "^2.0.15-beta.1",
     "electron": "^6.0.2",
     "electron-builder": "^21.2.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-rebuild": "^1.8.5",
+    "electron-updater": "^4.1.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "file-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
+    "get-app-icon": "^1.0.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^2.3.0",
     "image-webpack-loader": "^4.6.0",
     "jest": "^24.8.0",
     "jest-junit": "^7.0.0",
     "lint-staged": "^8.1.7",
+    "lodash-es": "^4.17.15",
+    "marked": "^0.7.0",
     "native-ext-loader": "^2.3.0",
+    "nedb": "^1.8.0",
     "node-sass": "^4.12.0",
     "prettier": "^1.17.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-beautiful-dnd": "^12.2.0",
+    "react-dom": "^16.8.6",
+    "react-hot-keys": "^2.4.4",
     "react-hot-loader": "^4.8.8",
+    "react-redux": "^7.0.3",
+    "react-stack-grid": "^0.7.1",
     "react-test-renderer": "^16.8.6",
+    "react-trend": "zxch3n/react-trend",
+    "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.5",
-    "sass-loader": "^7.1.0",
+    "redux-thunk": "^2.3.0",
+    "shortid": "^2.2.14",
     "source-map-loader": "^0.2.4",
     "spectron": "^8.0.0",
-    "style-loader": "^0.23.1",
+    "styled-components": "^4.3.2",
     "ts-jest": "^24.0.2",
     "ts-loader": "^6.0.4",
     "tslint": "^5.16.0",
@@ -154,33 +175,21 @@
     "webpack-dev-server": "^3.4.1",
     "webpack-merge": "^4.2.1",
     "webpack-node-externals": "^1.7.2",
-    "worker-loader": "^2.0.0"
+    "webpack-visualizer-plugin": "^0.1.11",
+    "wordcloud": "^1.1.0",
+    "worker-loader": "^2.0.0",
+    "css-loader": "^3.3.2",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "active-win": "^5.1.2",
-    "antd": "^3.19.7",
-    "classnames": "^2.2.6",
-    "deox": "^2.1.0",
-    "echarts": "^4.5.0",
-    "echarts-for-react": "^2.0.15-beta.1",
-    "electron-updater": "^4.1.2",
-    "get-app-icon": "^1.0.0",
-    "lodash": "^4.17.14",
-    "marked": "^0.7.0",
-    "nedb": "^1.8.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-beautiful-dnd": "^11.0.5",
-    "react-dom": "^16.8.6",
-    "react-hot-keys": "^2.4.4",
-    "react-redux": "^7.0.3",
-    "react-stack-grid": "^0.7.1",
-    "react-trend": "zxch3n/react-trend",
-    "redux": "^4.0.1",
-    "redux-thunk": "^2.3.0",
-    "shortid": "^2.2.14",
-    "styled-components": "^4.3.2",
-    "wordcloud": "^1.1.0"
-  }
+    "active-win": "^5.1.2"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "./src/main/**/*",
+    "./src/config.ts",
+    "**/electron"
+  ]
 }
diff --git a/src/main/AutoUpdater.ts b/src/main/AutoUpdater.ts
@@ -1,6 +1,5 @@
 import { autoUpdater } from 'electron-updater';
 import { GithubOptions } from 'builder-util-runtime';
-import { readFileSync } from 'fs';
 
 export class AutoUpdater {
     constructor(logger: any) {
@@ -13,7 +12,6 @@ export class AutoUpdater {
         });
         autoUpdater.on('update-available', info => {
             console.log('update available');
-            console.log(info);
             sendStatusToWindow('update-available', `Version: ${info.version}; ${info.releaseName}`);
         });
         autoUpdater.on('update-not-available', info => {

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -105,6 +105,7 @@ app.on('ready', async () => {
             }
         }
     ];
+
     // @ts-ignore
     const contextMenu = Menu.buildFromTemplate(menuItems);
     mGlobal.tray.setToolTip('Pomodoro Logger');
@@ -120,7 +121,6 @@ app.on('ready', async () => {
 
     await createWindow();
     const autoUpdater = new AutoUpdater((type: string, info: any) => {
-        console.log(info);
         if (win) {
             win.webContents.send(type, info);
         }

diff --git a/src/renderer/components/Analyser/Analyser.tsx b/src/renderer/components/Analyser/Analyser.tsx
@@ -82,7 +82,6 @@ export const Analyser: React.FC<Props> = (props: Props) => {
                 console.error(err);
                 return;
             }
-            console.log(doc);
             doc.sort((a, b) => a.startTime - b.startTime);
             setRecord(doc[doc.length - 1]);
         });

diff --git a/src/renderer/components/Application.tsx b/src/renderer/components/Application.tsx
@@ -7,6 +7,7 @@ import History from './History';
 import Analyser from './Analyser';
 import ReactHotkeys from 'react-hot-keys';
 import { connect } from 'react-redux';
+import { remote } from 'electron';
 import { actions as timerActions, switchTab, TimerActionTypes } from './Timer/action';
 import { actions as historyActions, HistoryActionCreatorTypes } from './History/action';
 import { kanbanActions } from './Kanban/reducer';
@@ -19,7 +20,6 @@ import Timer from './Timer';
 import { UserGuide } from './UserGuide/UserGuide';
 import { UpdateController } from './UpdateController';
 import { CardInDetail } from './Kanban/Card/CardInDetail';
-import '../style/global.css';
 import { ConnectedPomodoroSankey } from './Visualization/PomodoroSankey';
 
 const Main = styled.div`
@@ -51,6 +51,10 @@ const Application = (props: Props) => {
             case 'ctrl+shift+tab':
                 props.switchTab(-1);
                 break;
+            case 'ctrl+f12':
+                console.log('I hear you!');
+                remote.getCurrentWebContents().openDevTools({ activate: true, mode: 'detach' });
+                break;
         }
     };
 
@@ -124,7 +128,7 @@ const Application = (props: Props) => {
             <UpdateController />
             <CardInDetail />
             <ConnectedPomodoroSankey />
-            <ReactHotkeys keyName={'ctrl+tab,ctrl+shift+tab'} onKeyDown={onKeyDown} />
+            <ReactHotkeys keyName={'ctrl+tab,ctrl+shift+tab,ctrl+f12'} onKeyDown={onKeyDown} />
         </Main>
     );
 };

diff --git a/src/renderer/components/History/History.tsx b/src/renderer/components/History/History.tsx
@@ -43,7 +43,7 @@ interface Props extends HistoryActionCreatorTypes, HistoryState {
     chooseRecord: (r: PomodoroRecord) => void;
 }
 
-export const History: React.FunctionComponent<Props> = (props: Props) => {
+export const History: React.FunctionComponent<Props> = React.memo((props: Props) => {
     const [targetDate, setTargetDate] = useState<undefined | [number, number, number]>(undefined);
     const [shownPomodoros, setPomodoros] = useState<undefined | PomodoroRecord[]>(undefined);
     const [aggInfo, setAggInfo] = useState<AggPomodoroInfo>({
@@ -86,20 +86,17 @@ export const History: React.FunctionComponent<Props> = (props: Props) => {
             })
             .then((ans: AggPomodoroInfo) => {
                 setAggInfo(ans);
-                console.log('set agg info');
             });
     }, [props.chosenId, props.expiringKey]);
     useEffect(() => {
         if (targetDate == null) {
             return;
         }
 
-        console.log('Date Effect');
         const db = new DBWorker('sessionDB');
         const dateStart = new Date(`${targetDate[0]}-${targetDate[1]}-${targetDate[2]}`).getTime();
         const nextDay = dateStart + 24 * 3600 * 1000;
         db.find({ startTime: { $lt: nextDay, $gte: dateStart } }, {}).then(docs => {
-            console.log('docs', docs);
             if (docs && docs.length) {
                 setPomodoros(docs);
             }
@@ -236,4 +233,4 @@ export const History: React.FunctionComponent<Props> = (props: Props) => {
             </SubContainer>
         </Container>
     );
-};
+});