cleanup, test and performance updates

Author: bstavroulakis

index.html

@@ -14,7 +14,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="theme-color" content="#287ab1">
     <link rel="apple-touch-icon" sizes="180x180" href="{{ CDN }}/app-icon.png">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimal-ui">
     <link rel="manifest" href="/assets/manifest.json" />
     {{ STYLES }}
     {{ STATE }}
@@ -38,4 +38,4 @@
       }
     </script>
   </body>
-</html>
+</html>

package-lock.json

@@ -32,8 +32,8 @@
     "dev": "rimraf ./dist && cross-env NODE_ENV=development node server",
     "build": "node build/build.js",
     "build:server": "cross-env NODE_ENV=production webpack --config ./build/webpack.server.config.js --progress --hide-modules",
-    "unit": "karma start ./test/unit/karma.conf.js --single-run",
-    "unit:watch": "karma start ./test/unit/karma.conf.js"
+    "test": "karma start ./test/unit/karma.conf.js --single-run",
+    "test:watch": "karma start ./test/unit/karma.conf.js"
   },
   "optionalDependencies": {
     "fsevents": "*"
@@ -44,10 +44,12 @@
     "compression": "^1.7.1",
     "cross-env": "^5.0.5",
     "express": "^4.16.2",
+    "intersection-observer-polyfill": "^0.1.0",
     "localforage": "^1.5.2",
     "lru-cache": "^4.0.2",
     "serialize-javascript": "^1.3.0",
     "vue": "^2.5.2",
+    "vue-clazy-load": "^0.2.0",
     "vue-resource": "^1.2.1",
     "vue-router": "^3.0.0",
     "vue-server-renderer": "^2.5.2",
@@ -86,13 +88,14 @@
     "mocha": "4.0.1",
     "node-sass": "4.5.3",
     "phantomjs-prebuilt": "2.1.15",
+    "purify-css": "^1.2.5",
     "purifycss": "1.2.6",
     "purifycss-webpack": "0.7.0",
     "recursive-readdir": "2.2.1",
     "rimraf": "2.6.2",
     "sass-loader": "6.0.6",
     "serve-favicon": "2.4.5",
-    "sinon": "4.0.1",
+    "sinon": "^2.1.0",
     "sinon-chai": "2.14.0",
     "url-loader": "0.6.2",
     "vue-loader": "13.3.0",

package.json

@@ -12,12 +12,12 @@ const favicon = require('serve-favicon')
 const serialize = require('serialize-javascript')
 const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
-var allowCrossDomain = function(req, res, next) {
-    res.header('Access-Control-Allow-Origin', 'fullstackweekly-client.azureedge.net');
-    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
-    res.header('Access-Control-Allow-Headers', 'Content-Type');
+var allowCrossDomain = function (req, res, next) {
+  res.header('Access-Control-Allow-Origin', 'fullstackweekly-client.azureedge.net')
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
+  res.header('Access-Control-Allow-Headers', 'Content-Type')
 
-    next();
+  next()
 }
 
 function shouldCompress (req, res) {
@@ -28,16 +28,16 @@ function shouldCompress (req, res) {
   return true
 }
 
-var cacheControl = function(req, res, next) {
+var cacheControl = function (req, res, next) {
   if (isProd) {
     res.header('Cache-Control', 'public, max-age=86400, no-cache') // one day
   } else {
     res.header('Cache-Control', 'no-cache, no-store, must-revalidate') // never
-  } 
+  }
   next()
 }
 
-var strictTransportSecurity = function(req, res, next) {
+var strictTransportSecurity = function (req, res, next) {
   res.header('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload')
   next()
 }
@@ -49,11 +49,11 @@ const indexHTML = (() => {
     template = fs.readFileSync(resolve('./dist/index.html'), 'utf-8')
     template = template.replace(/{{ SCRIPTS }}/gmi, '')
     template = template.replace('{{ STYLES }}', '')
-    template = template.replace('<link href="/assets/styles', '<link href="{{ CDN }}/styles')
+    template = template.replace('<link href="/assets/styles', '<link rel="stylesheet" href="{{ CDN }}/styles media="all" ')
     template = template.replace(/<script type="text\/javascript" src="\/assets/gmi, '<script type="text/javascript" src="{{ CDN }}/')
   } else {
     template = fs.readFileSync(resolve('./index.html'), 'utf-8')
-    template = template.replace('{{ STYLES }}', '<link rel="stylesheet" href="{{ CDN }}/styles.css">')
+    template = template.replace('{{ STYLES }}', '<link rel="stylesheet" href="{{ CDN }}/styles.css" media="all">')
     template = template.replace(/{{ SCRIPTS }}/gmi, '<script defer src="{{ CDN }}/js/vendor.js"></script><script defer src="{{ CDN }}/js/app.js"></script>')
   }
   template = template.replace(/{{ CDN }}/gmi, cdnClient)
@@ -75,7 +75,7 @@ if (isProd) {
   app.use('/', express.static(resolve('./dist')))
   app.use(favicon(path.resolve(__dirname, './dist/favicon.ico')))
 } else {
-  app.use('/dist', express.static(resolve('./dist'))) 
+  app.use('/dist', express.static(resolve('./dist')))
   app.use(favicon(path.resolve(__dirname, 'src/assets/favicon.ico')))
 }
 
@@ -95,20 +95,19 @@ app.get('*', (req, res) => {
     return res.end('waiting for compilation... refresh in a moment.')
   }
 
-  var s = Date.now()
   const context = { url: req.url }
   renderer.renderToString(context, (err, html) => {
     if (err) {
-      console.log('Error rendering to string: ');
-      console.log(err);
-      console.log(err.message);
-      return res.status(200).send('Server Error');
+      console.log('Error rendering to string: ')
+      console.log(err)
+      console.log(err.message)
+      return res.status(200).send('Server Error')
     }
-    html = indexHTML.replace('{{ APP }}', html);
-    html = html.replace('{{ STATE }}', `<script>window.__INITIAL_STATE__=${serialize(context.initialState, { isJSON: true })}</script>`);
-    res.setHeader('Content-Length', Buffer.byteLength(html));
-    res.write(html);
-    res.end();
+    html = indexHTML.replace('{{ APP }}', html)
+    html = html.replace('{{ STATE }}', `<script>window.__INITIAL_STATE__=${serialize(context.initialState, { isJSON: true })}</script>`)
+    res.setHeader('Content-Length', Buffer.byteLength(html))
+    res.write(html)
+    res.end()
   })
 })
 

server.js

@@ -4,8 +4,16 @@ import store from './vuex/store'
 import router from './router/index'
 import { sync } from 'vuex-router-sync'
 
+if (typeof window !== 'undefined') {
+  window.IntersectionObserver = require('intersection-observer-polyfill/dist/IntersectionObserver.global')
+}
+
+const VueClazyLoad = require('vue-clazy-load')
+
 sync(store, router)
 
+Vue.use(VueClazyLoad)
+
 const app = new Vue({
   router,
   store,