feat(bundling): Improve bundling

- Isolate vendor
- Gzipping

.babelrc

@@ -1,5 +1,8 @@
 {
-  "presets": ["es2015"],
+  "presets": [
+    "bluebird", ["es2015", { "loose": true, "modules": false }]
+  ],
+  "plugins": ["lodash"],
   "env": {
     "AVA": {
       "plugins": [

package.json

@@ -63,13 +63,16 @@
   "devDependencies": {
     "ava": "0.18.2",
     "babel-core": "6.22.0",
-    "babel-loader": "6.4.1",
+    "babel-loader": "7.0.0",
+    "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
+    "babel-preset-bluebird": "^1.0.1",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-stage-2": "6.22.0",
     "babel-register": "6.22.0",
     "browser-env": "2.0.25",
+    "compression-webpack-plugin": "^0.4.0",
     "cross-env": "3.0.0",
     "css-loader": "0.25.0",
     "file-loader": "0.9.0",
@@ -87,6 +90,7 @@
     "vue-loader": "11.3.4",
     "vue-template-compiler": "2.2.6",
     "webpack": "2.3.2",
+    "webpack-bundle-analyzer": "^2.4.0",
     "webpack-dashboard": "0.3.0",
     "webpack-dev-server": "2.1.0-beta.9"
   },
@@ -110,9 +114,17 @@
     ],
     "babel": {
       "presets": [
-        "es2015"
+        "bluebird",
+        [
+          "es2015",
+          {
+            "loose": true,
+            "modules": false
+          }
+        ]
       ],
       "plugins": [
+        "lodash",
         "transform-runtime"
       ],
       "env": {

scripts/deploy-release.sh

@@ -1,3 +1,3 @@
 #!/bin/sh
 echo "Publishing to Github Releases"
-publish-release --token $GITHUB_TOKEN --owner $CIRCLE_PROJECT_USERNAME --repo $CIRCLE_PROJECT_REPONAME --tag $CIRCLE_TAG --assets dist/share.html,dist/embed.js,dist/share.js,dist/window.js --name "Podlove Web Player"  --notes " "
+publish-release --token $GITHUB_TOKEN --owner $CIRCLE_PROJECT_USERNAME --repo $CIRCLE_PROJECT_REPONAME --tag $CIRCLE_TAG --assets dist/share.html,dist/embed.js,dist/share.js,dist/window.js,dist/vendor.js --name "Podlove Web Player"  --notes " "

src/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import head from 'lodash/head'
+import { head } from 'lodash'
 
 import debug from 'utils/debug'
 import registerDirectives from './directives'

src/components/tabs/Tabs.vue

@@ -5,7 +5,7 @@
         <ChaptersIcon slot="icon"></ChaptersIcon>
         <span slot="title">Kapitel</span>
       </TabHeaderItem>
-      <TabHeaderItem :active="tabs.share" :click="toggleTab('share')">
+      <TabHeaderItem v-if="reference.config && reference.share" :active="tabs.share" :click="toggleTab('share')">
         <ShareIcon slot="icon"></ShareIcon>
         <span slot="title">Share</span>
       </TabHeaderItem>
@@ -17,7 +17,7 @@
     <TabBody :active="tabs.chapters" v-if="chapters.length > 0">
       <ChaptersTab />
     </TabBody>
-    <TabBody :active="tabs.share">
+    <TabBody :active="tabs.share" v-if="reference.config && reference.share">
       <ShareTab />
     </TabBody>
     <TabBody :active="tabs.settings">
@@ -56,7 +56,8 @@ export default {
       theme: this.$select('theme'),
       tabs: this.$select('tabs'),
       mode: this.$select('mode'),
-      chapters: this.$select('chapters')
+      chapters: this.$select('chapters'),
+      reference: this.$select('reference')
     }
   },
   methods: {

src/embed/embed.js

@@ -85,7 +85,8 @@ const configNode = (config = {}) =>
     .then(config => tag('script', `window.PODLOVE = ${JSON.stringify(config)}`))
 
 // Player Logic
-const appLogic = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
+const vendorBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/vendor.js`})
+const appBundle = config => tag('script', '', {type: 'text/javascript', src: `${get(config.reference, 'base', '.')}/window.js`})
 
 // Dynamic resizer
 const dynamicResizer = tag('script', iframeResizerContentWindow)
@@ -99,7 +100,8 @@ window.podlovePlayer = (selector, config) => {
   return Bluebird.all([
     playerEntry,
     configNode(config),
-    appLogic(config),
+    vendorBundle(config),
+    appBundle(config),
     dynamicResizer
   ])
   .then(result => result.join(''))

src/vendor.js

@@ -0,0 +1,2 @@
+import 'vue'
+import 'howler'

src/webpack.config.js

@@ -1,13 +1,16 @@
 const webpack = require('webpack')
 const DashboardPlugin = require('webpack-dashboard/plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const CompressionPlugin = require('compression-webpack-plugin')
 
 const path = require('path')
 
 const config = {
   entry: {
     embed: path.resolve(__dirname, 'embed', 'embed.js'),
     window: path.resolve(__dirname, 'embed', 'window.js'),
-    share: path.resolve(__dirname, 'embed', 'share.js')
+    share: path.resolve(__dirname, 'embed', 'share.js'),
+    vendor: path.resolve(__dirname, 'vendor.js')
   },
   output: {
     path: path.resolve('dist'),
@@ -57,6 +60,7 @@ const config = {
   devtool: '#eval-source-map',
   plugins: [
     new webpack.LoaderOptionsPlugin({
+      minimize: true,
       options: {
         sassLoader: {
           includePaths: [
@@ -65,6 +69,12 @@ const config = {
           ]
         }
       }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      filename: 'vendor.js',
+      chunks: ['share', 'window'],
+      minChunks: Infinity
     })
   ]
 }
@@ -79,14 +89,23 @@ if (process.env.NODE_ENV === 'production') {
       }
     }),
     new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
+      sourceMap: false,
       compress: {
         warnings: false
       }
+    }),
+    new CompressionPlugin({
+      test: /\.(js)$/
     })
   ]
 } else {
-  config.plugins = [...config.plugins, new DashboardPlugin()]
+  config.plugins = [...config.plugins,
+    new DashboardPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false
+    })
+  ]
 }
 
 module.exports = config

statics/share.html

@@ -11,6 +11,7 @@
 </head>
 <body>
     <PodlovePlayer></PodlovePlayer>
+    <script src="vendor.js"></script>
     <script src="share.js"></script>
 </body>
 </html>

statics/standalone.html

@@ -58,6 +58,7 @@
         }
     </script>
 
+    <script src="vendor.js"></script>
     <script src="window.js"></script>
 </body>
 </html>