chore: better code splitting (#413)

* chore: split specific node_modules * chore: exclude sourcemaps from main bundle * chore: use terser to minify * fix: importing fonts * feat: better code splitting for npm packages * feat: wip * fix: code splitting * chore: simpler chunks splitting in dev mode
wexond · Mar 3, 2020 · 38d480d · 38d480d
1 parent 07a3b23
commit 38d480d
Show file tree

Hide file tree

Showing 23 changed files with 355 additions and 436 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,5 @@ dist
 filters
 package-lock.json
 temp-electron-builder.json
-temp-package.json
+temp-package.json
+chunks-entries-map.json
diff --git a/package.json b/package.json
@@ -21,11 +21,14 @@
     "url": "https://github.com/wexond/wexond/issues"
   },
   "scripts": {
+    "dev-renderer": "cross-env DEV=1 webpack-dev-server --config webpack.config.renderer.js",
+    "build-renderer": "webpack --config webpack.config.renderer.js",
+    "pre-renderer": "cross-env PREBUILD=1 npm run build-renderer",
     "dev": "cross-env START=1 npm run watch",
-    "build": "npm run extensions && concurrently \"webpack --config webpack.config.renderer.js\" \"webpack\" \"webpack --config webpack.config.web.js\"",
+    "build": "npm run extensions && npm run pre-renderer && concurrently \"npm run build-renderer\" \"webpack\" \"webpack --config webpack.config.web.js\"",
     "ci-build": "node scripts/ci-build.js",
-    "start": "cross-env NODE_ENV='dev' electron .",
-    "watch": "npm run extensions && concurrently \"cross-env ENV='dev' webpack-dev-server --config webpack.config.renderer.js\" \" cross-env ENV='dev' webpack\" \"cross-env ENV='dev' webpack-dev-server --config webpack.config.web.js\"",
+    "start": "electron .",
+    "watch": "npm run extensions && concurrently \"npm run dev-renderer\" \" cross-env DEV=1 webpack\" \"cross-env DEV=1 webpack-dev-server --config webpack.config.web.js\"",
     "compile-win32": "npm run build && electron-builder -w",
     "compile-darwin": "npm run build && electron-builder -m",
     "compile-linux": "npm run build && electron-builder -l",
@@ -88,6 +91,7 @@
     "source-map-support": "^0.5.16",
     "styled-components": "^5.0.1",
     "terser": "^4.6.4",
+    "terser-webpack-plugin": "^2.3.5",
     "ts-loader": "^6.2.1",
     "typescript": "^3.8.3",
     "typescript-plugin-styled-components": "^1.4.4",

diff --git a/src/renderer/constants/fonts.ts b/src/renderer/constants/fonts.ts
@@ -1,5 +1,3 @@
-export const fonts = {
-  robotoRegular: require('~/renderer/resources/fonts/roboto-regular.woff2'),
-  robotoMedium: require('~/renderer/resources/fonts/roboto-medium.woff2'),
-  robotoLight: require('~/renderer/resources/fonts/roboto-light.woff2'),
-};
+export const FONT_ROBOTO_REGULAR = require('~/renderer/resources/fonts/roboto-regular.woff2');
+export const FONT_ROBOTO_MEDIUM = require('~/renderer/resources/fonts/roboto-medium.woff2');
+export const FONT_ROBOTO_LIGHT = require('~/renderer/resources/fonts/roboto-light.woff2');
diff --git a/src/renderer/mixins/typography.ts b/src/renderer/mixins/typography.ts
@@ -1,3 +1,9 @@
+import {
+  FONT_ROBOTO_REGULAR,
+  FONT_ROBOTO_MEDIUM,
+  FONT_ROBOTO_LIGHT,
+} from '../constants';
+
 export const getLetterSpacing = (fontSize: number, tracking: number) =>
   tracking / fontSize;
 
@@ -102,3 +108,30 @@ export const maxLines = (count: number, lineHeight?: number) => `
   -webkit-line-clamp: ${count};
   -webkit-box-orient: vertical;
 `;
+
+export const injectFonts = () => {
+  const styleElement = document.createElement('style');
+
+  styleElement.textContent = `
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(${FONT_ROBOTO_REGULAR}) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: url(${FONT_ROBOTO_MEDIUM}) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(${FONT_ROBOTO_LIGHT}) format('woff2');
+}
+`;
+
+  document.head.appendChild(styleElement);
+};
diff --git a/src/renderer/views/add-bookmark/index.tsx b/src/renderer/views/add-bookmark/index.tsx
@@ -2,34 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { App } from './components/App';
-import { fonts } from '../../constants';
 import { ipcRenderer } from 'electron';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/app/index.tsx b/src/renderer/views/app/index.tsx
@@ -2,34 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import App from './components/App';
-import { fonts } from '../../constants';
 import { ipcRenderer } from 'electron';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/auth/index.tsx b/src/renderer/views/auth/index.tsx
@@ -2,34 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { App } from './components/App';
-import { fonts } from '../../constants';
 import { ipcRenderer } from 'electron';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/bookmarks/index.tsx b/src/renderer/views/bookmarks/index.tsx
@@ -2,31 +2,8 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import App from './components/App';
-import { fonts } from '../../constants';
+import { injectFonts } from '~/renderer/mixins';
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/credentials/index.tsx b/src/renderer/views/credentials/index.tsx
@@ -3,35 +3,10 @@ import * as ReactDOM from 'react-dom';
 import { ipcRenderer } from 'electron';
 
 import { App } from './components/App';
-import { fonts } from '../../constants/fonts';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/downloads/index.tsx b/src/renderer/views/downloads/index.tsx
@@ -2,34 +2,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { App } from './components/App';
-import { fonts } from '../../constants';
 import { ipcRenderer } from 'electron';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/find/index.tsx b/src/renderer/views/find/index.tsx
@@ -3,33 +3,10 @@ import * as ReactDOM from 'react-dom';
 import { ipcRenderer } from 'electron';
 
 import { App } from './components/App';
-import { fonts } from '../../constants/fonts';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/src/renderer/views/form-fill/index.tsx b/src/renderer/views/form-fill/index.tsx
@@ -3,35 +3,10 @@ import * as ReactDOM from 'react-dom';
 import { ipcRenderer } from 'electron';
 
 import { App } from './components/App';
-import { fonts } from '../../constants/fonts';
+import { injectFonts } from '~/renderer/mixins';
 
 ipcRenderer.setMaxListeners(0);
 
-const styleElement = document.createElement('style');
-
-styleElement.textContent = `
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: url(${fonts.robotoRegular}) format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: url(${fonts.robotoMedium}) format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: url(${fonts.robotoLight}) format('woff2');
-}
-`;
-
-document.head.appendChild(styleElement);
+injectFonts();
 
 ReactDOM.render(<App />, document.getElementById('app'));