implement component caching

Author: yyx990803

build/webpack.server.config.js

@@ -9,7 +9,7 @@ module.exports = Object.assign({}, base, {
  filename: 'server-bundle.js',
  libraryTarget: 'commonjs2'
  }),
- externals: ['firebase', 'lru-cache', 'es6-promise'],
+ externals: Object.keys(require('../package.json').dependencies),//['firebase', 'lru-cache', 'es6-promise'],
  plugins: [
  new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),

server.js

@@ -28,10 +28,19 @@ let renderer
 if (isProd) {
  // create server renderer from real fs
  const bundlePath = resolve('./dist/server-bundle.js')
- renderer = createBundleRenderer(fs.readFileSync(bundlePath, 'utf-8'))
+ renderer = createRenderer(fs.readFileSync(bundlePath, 'utf-8'))
 } else {
  require('./build/setup-dev-server')(app, bundle => {
- renderer = createBundleRenderer(bundle)
+ renderer = createRenderer(bundle)
+ })
+}
+
+function createRenderer (bundle) {
+ return createBundleRenderer(bundle, {
+ cache: require('lru-cache')({
+ max: 1000,
+ maxAge: 1000 * 60 * 15
+ })
  })
 }
 

src/components/Item.vue

@@ -28,8 +28,12 @@
 
 <script>
 export default {
- name: 'NewsItem',
- props: ['item']
+ name: 'news-item',
+ props: ['item'],
+ serverCacheKey: ({ item: { id, __lastUpdated } }) => {
+ console.log(__lastUpdated)
+ return `${id}::${__lastUpdated}`
+ }
 }
 </script>
 

src/store/api.js

@@ -50,6 +50,7 @@ function fetch (child) {
  return new Promise((resolve, reject) => {
  api.child(child).once('value', snapshot => {
  const val = snapshot.val()
+ val.__lastUpdated = Date.now()
  cache && cache.set(child, val)
  resolve(val)
  }, reject)