Merge pull request #965 from chrisckc/fix/webpack-bundle-duplication

fix(webpack.config.template.js): change webpack config to fix bundle duplication issue

lib/resources/content/webpack.config.template.js

@@ -44,8 +44,7 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
     alias: { 'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding') }
   },
   entry: {
-    app: ['aurelia-bootstrapper'],
-    vendor: ['bluebird'],
+    app: ['aurelia-bootstrapper']
   },
   mode: production ? 'production' : 'development',
   output: {
@@ -55,6 +54,58 @@ module.exports = ({production, server, extractCss, coverage, analyze, karma} = {
     sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
     chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
   },
+  optimization: {
+    // Use splitChunks to breakdown the vendor bundle into smaller files
+    // https://webpack.js.org/plugins/split-chunks-plugin/
+    splitChunks: { 
+      chunks: "initial",
+      cacheGroups: {
+        default: false, // Disable the built-in groups (default and vendors)
+        vendors: false,
+        bluebird: {
+          test: /[\\/]node_modules[\\/]bluebird[\\/]/,
+          name: "vendor.bluebird",
+          enforce: true,
+          priority: 100
+        },
+        // You can insert additional entries here for jQuery and bootstrap etc. if you need them
+        // Break the Aurelia bundle down into smaller chunks, binding and templating are the largest
+        aureliaBinding: {
+          test: /[\\/]node_modules[\\/]aurelia-binding[\\/]/,
+          name: "vendor.aurelia-binding",
+          enforce: true,
+          priority: 28
+        },
+        aureliaTemplating: {
+          test: /[\\/]node_modules[\\/]aurelia-templating[\\/]/,
+          name: "vendor.aurelia-templating",
+          enforce: true,
+          priority: 26
+        },
+        aurelia: {
+          test: /[\\/]node_modules[\\/]aurelia-.*[\\/]/,
+          name: "vendor.aurelia",
+          enforce: true,
+          priority: 20
+        },
+        // This picks up everything else being used from node_modules
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          enforce: true,
+          priority: 10
+        },
+        common: { // common chunk
+          name: 'common',
+          minChunks: 2,   // Creates a new chunk if a module is shared between different chunks more than twice
+          chunks: 'async',
+          priority: 0,
+          reuseExistingChunk: true,
+          enforce: true
+        }
+      }
+    }
+  },
   performance: { hints: false },
   devServer: {
     contentBase: outDir,