webpack: load vue/vuex/vue-router from cdn instead of local bundle

build/webpack.base.config.js

@@ -90,7 +90,7 @@ module.exports = {
 };
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map';
+  // module.exports.devtool = '#source-map';
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.LoaderOptionsPlugin({
       minimize: true

build/webpack.client.config.js

@@ -11,11 +11,12 @@ module.exports = merge(base, {
       name: 'manifest'
     },
   },
+  externals: {
+    'vue': 'Vue',
+    'vuex': 'Vuex',
+    'vue-router': 'VueRouter',
+  },
   plugins: [
-    // new webpack.optimize.CommonsChunkPlugin({
-    //   name: 'manifest',
-    //   minChunks: Infinity
-    // }),
     new VueSSRClientPlugin()
   ]
 });

index.js

@@ -13,6 +13,7 @@ const serve = (p, cache) => express.static(path.resolve(__dirname, p), {
 });
 
 let site = express();
+let pluginRouter = express.Router();
 
 // disable 'x-powered-by' for security
 site.disable('x-powered-by');
@@ -41,6 +42,9 @@ site.use((req, res, next) => {
   return next();
 });
 
+// Router for all plugins
+site.use(pluginRouter);
+
 // API entry
 site.use('/api', require('./server'));
 
@@ -138,15 +142,14 @@ Object.keys(config.plugins).forEach(plugin => {
     manifest = JSON.parse(fs.readFileSync(path.join(__dirname, './plugins/', plugin, './manifest.json')));
   } catch(e) {
     console.error(e);
-    // TODO
   }
 
   if (!config.plugins[plugin].enabled) {
     return;
   }
 
   const installer = require(path.join(__dirname, './plugins/', plugin, manifest.entry.server));
-  installer({ site, utils, config });
+  installer({ site: pluginRouter, utils, config });
   console.log(`Loaded plugin: ${manifest.name} v${manifest.version}, written by ${manifest.author.name}.`);
 });
 

plugins/rss-feed/server/index.js

@@ -3,7 +3,11 @@ const path = require('path');
 const fs = require('fs');
 const express = require('express');
 
+const RSS_CACHE_STATUS_HEADER = 'X-RSS-From-Cache';
+
 function installer ({ site, utils, config }) {
+  let rssCacheContent = null;
+
   function renderXML (posts) {
     let resolve, promise;
     promise = new Promise(r => resolve = r);
@@ -28,10 +32,23 @@ function installer ({ site, utils, config }) {
     return promise;
   }
 
+  function rssCacheController (req, res, next) {
+    switch (req.method) {
+    case 'PUT':
+    case 'POST':
+    case 'DELETE':
+      rssCacheContent = null;
+    default:
+      next();
+    }
+  }
+
   const router = express.Router();
 
   router.use((req, res, next) => {
     res.set('content-type', 'application/rss+xml');
+    res.header(RSS_CACHE_STATUS_HEADER, 'false');
+
     next();
   });
 
@@ -40,6 +57,11 @@ function installer ({ site, utils, config }) {
   });
 
   router.get('/', async (req, res) => {
+    if (rssCacheContent) {
+      res.header(RSS_CACHE_STATUS_HEADER, 'true');
+      return res.send(rssCacheContent);
+    }
+
     try {
       let cursor = utils.db.conn.collection('posts').find({}, { sort: [['date', 'desc']] }).limit(config.page.size);
       posts = await cursor.toArray();
@@ -50,9 +72,11 @@ function installer ({ site, utils, config }) {
         message: utils.messages.ERR_MONGO_FAIL
       });
     }
-    res.send(await renderXML(posts));
+    rssCacheContent = await renderXML(posts);
+    res.send(rssCacheContent);
   });
 
+  site.use(rssCacheController);
   site.use('/feeds', router);
 }
 

src/app.js

@@ -1,5 +1,3 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
 import regeneratorRuntime from 'regenerator-runtime';
 import axios from 'axios';
 
@@ -11,20 +9,22 @@ import config from './config.json';
 import titleMixin from './utils/title';
 import openGraphMixin from './utils/open-graph';
 
-Vue.use(Vuex);
-Vue.mixin(titleMixin);
-Vue.mixin(openGraphMixin);
-
 axios.interceptors.response.use(response => {
   return response;
 }, error => {
   console.log(`ERROR: ${error.errno}: failed to ${error.config.method} ${error.config.url}`);
   return Promise.reject(error);
 });
 
-export async function createApp () {
-  const router = createRouter();
-  const store = createStore();
+export async function createApp (libs) {
+  const { Vue, Vuex } = libs;
+
+  Vue.use(Vuex);
+  Vue.mixin(titleMixin);
+  Vue.mixin(openGraphMixin);
+
+  const router = createRouter(null, libs);
+  const store = createStore(libs);
 
   const app = new Vue({
     router, store,

src/entry-client.js

@@ -1,7 +1,11 @@
 import { createApp } from './app.js';
 import config from './config.json';
 
-createApp().then(({ app, store, router }) => {
+createApp({
+  Vue: window.Vue,
+  VueRouter: window.VueRouter,
+  Vuex: window.Vuex,
+}).then(({ app, store, router }) => {
   if (window.__INITIAL_STATE__) {
     store.replaceState(window.__INITIAL_STATE__);
   }

src/entry-server.js

@@ -1,3 +1,7 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+
 import { createApp } from './app.js';
 import axios from 'axios';
 import regeneratorRuntime from 'regenerator-runtime';
@@ -12,7 +16,11 @@ axios.interceptors.request.use(function (config) {
 });
 
 export default context => new Promise((resolve, reject) => {
-  createApp().then(({ app, store, router }) => {
+  createApp({
+    Vue,
+    VueRouter,
+    Vuex
+  }).then(({ app, store, router }) => {
     router.push(context.url);
 
     router.onReady(() => {      

src/index.html

@@ -16,6 +16,9 @@
     }}}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.13.1/styles/xcode.css">
     <script src="https://cdn.jsdelivr.net/npm/babel-polyfill@7.0.0-alpha.1/dist/polyfill.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script>
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
   </head>
   <body>

src/router.js

@@ -1,6 +1,3 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
-
 import ClientSideBar from './components/ClientSideBar.vue';
 import PostsListView from './views/PostsListView.vue';
 import PostView from './views/PostView.vue';
@@ -16,11 +13,11 @@ const AdminLogs = () => import(/* webpackChunkName: "group-admin" */ './componen
 const AdminMedia = () => import(/* webpackChunkName: "group-admin" */ './components/admin/Media.vue');
 const AdminPage = () => import(/* webpackChunkName: "group-admin" */ './components/admin/Page.vue');
 
-Vue.use(VueRouter);
-
 export let coreComponents = { ClientSideBar, PostsListView, PostView, PageView, NotFound, AdminSideBar };
 
-export function createRouter (extraRoutes) {
+export function createRouter (extraRoutes, { Vue, VueRouter }) {
+  Vue.use(VueRouter);
+
   const router = new VueRouter({
     mode: 'history',
     routes: [

src/store.js

@@ -1,11 +1,9 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
 import actions from './store/actions';
 import mutations from './store/mutations';
 
-Vue.use(Vuex);
+export function createStore ({ Vue, Vuex }) {
+  Vue.use(Vuex);
 
-export function createStore () {
   const store = new Vuex.Store({
     state: {
       categories: [],