optimizing quasar's vendor file

client/package.json

@@ -10,7 +10,8 @@
   "scripts": {
     "lint": "eslint --ext .js,.vue src",
     "test": "echo \"No test specified\" && exit 0",
-    "build": "quasar build"
+    "build": "quasar build",
+    "build-ssr": "quasar build -m ssr"
   },
   "dependencies": {
     "@quasar/extras": "^1.10.10",

client/quasar.conf.js

@@ -59,6 +59,10 @@ module.exports = function (ctx) {
     // https://quasar.dev/quasar-cli/cli-documentation/supporting-ie
     supportIE: false,
 
+    vendor: {
+      remove: ['apexcharts/dist', 'citeproc', 'citation-js', 'moment', 'vue-d3-network/dist']
+    },
+
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
       // env: {
@@ -76,6 +80,7 @@ module.exports = function (ctx) {
       // extractCSS: false,
       distDir: '../build/spa',
       minify: true,
+      // analyze: true,
 
       // https://quasar.dev/quasar-cli/cli-documentation/handling-webpack
       extendWebpack (cfg) {

client/src-ssr/extension.js

@@ -0,0 +1,21 @@
+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ *
+ * WARNING!
+ * If you import anything from node_modules, then make sure that the package is specified
+ * in package.json > dependencies and NOT in devDependencies
+ *
+ * Note: This file is used for both PRODUCTION & DEVELOPMENT.
+ * Note: Changes to this file (but not any file it imports!) are picked up by the
+ * development server, but such updates are costly since the dev-server needs a reboot.
+ */
+
+module.exports.extendApp = function ({ app, ssr }) {
+  /*
+     Extend the parts of the express app that you
+     want to use with development server too.
+
+     Example: app.use(), app.get() etc
+  */
+}

client/src-ssr/index.js

@@ -0,0 +1,100 @@
+/*
+ * This file runs in a Node context (it's NOT transpiled by Babel), so use only
+ * the ES6 features that are supported by your Node version. https://node.green/
+ *
+ * WARNING!
+ * If you import anything from node_modules, then make sure that the package is specified
+ * in package.json > dependencies and NOT in devDependencies
+ *
+ * Note: This file is used only for PRODUCTION. It is not picked up while in dev mode.
+ *   If you are looking to add common DEV & PROD logic to the express app, then use
+ *   "src-ssr/extension.js"
+ */
+
+const express = require('express')
+const compression = require('compression')
+
+const ssr = require('quasar-ssr')
+const extension = require('./extension')
+const app = express()
+const port = process.env.PORT || 3000
+
+const serve = (path, cache) => express.static(ssr.resolveWWW(path), {
+  maxAge: cache ? 1000 * 60 * 60 * 24 * 30 : 0
+})
+
+// gzip
+app.use(compression({ threshold: 0 }))
+
+// serve this with no cache, if built with PWA:
+if (ssr.settings.pwa) {
+  app.use('/service-worker.js', serve('service-worker.js'))
+}
+
+// serve "www" folder
+app.use('/', serve('.', true))
+
+// we extend the custom common dev & prod parts here
+extension.extendApp({ app, ssr })
+
+// this should be last get(), rendering with SSR
+app.get('*', (req, res) => {
+  res.setHeader('Content-Type', 'text/html')
+
+  // SECURITY HEADERS
+  // read more about headers here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
+  // the following headers help protect your site from common XSS attacks in browsers that respect headers
+  // you will probably want to use .env variables to drop in appropriate URLs below,
+  // and potentially look here for inspiration:
+  // https://ponyfoo.com/articles/content-security-policy-in-express-apps
+
+  // https://developer.mozilla.org/en-us/docs/Web/HTTP/Headers/X-Frame-Options
+  // res.setHeader('X-frame-options', 'SAMEORIGIN') // one of DENY | SAMEORIGIN | ALLOW-FROM https://example.com
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection
+  // res.setHeader('X-XSS-Protection', 1)
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options
+  // res.setHeader('X-Content-Type-Options', 'nosniff')
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
+  // res.setHeader('Access-Control-Allow-Origin', '*') // one of '*', '<origin>' where origin is one SINGLE origin
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
+  // res.setHeader('X-DNS-Prefetch-Control', 'off') // may be slower, but stops some leaks
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+  // res.setHeader('Content-Security-Policy', 'default-src https:')
+
+  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox
+  // res.setHeader('Content-Security-Policy', 'sandbox') // this will lockdown your server!!!
+  // here are a few that you might like to consider adding to your CSP
+  // object-src, media-src, script-src, frame-src, unsafe-inline
+
+  ssr.renderToString({ req, res }, (err, html) => {
+    if (err) {
+      if (err.url) {
+        res.redirect(err.url)
+      }
+      else if (err.code === 404) {
+        res.status(404).send('404 | Page Not Found')
+      }
+      else {
+        // Render Error Page or Redirect
+        res.status(500).send('500 | Internal Server Error')
+        if (ssr.settings.debug) {
+          console.error(`500 on ${req.url}`)
+          console.error(err)
+          console.error(err.stack)
+        }
+      }
+    }
+    else {
+      res.send(html)
+    }
+  })
+})
+
+app.listen(port, () => {
+  console.log(`Server listening at port ${port}`)
+})

client/src-ssr/ssr-flag.d.ts

@@ -0,0 +1,9 @@
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    ssr: true;
+  }
+}