Adds vendor bundling (#487)

CHANGELOG.md

@@ -5,6 +5,14 @@
 
 ## Master
 
+## 0.6.0-alpha.5 - 05/30/17
+
+- rolls file-loader back to 0.10.1 (problem where `outputPath` is used in final path)
+
+## 0.6.0-alpha.4 - 05/25/17
+
+- Adds vendor bundling [#487](https://github.com/NYTimes/kyt/pull/487)
+
 ## 0.6.0-alpha.3 - 05/25/17
 
 - Upgrades webpack and loaders [#482](https://github.com/NYTimes/kyt/pull/482)

e2e_tests/tests/kyt-build.test.js

@@ -18,6 +18,11 @@ describe('kyt build', () => {
     // Should copy static assets from src/public directory
     expect(shell.test('-f', 'build/public/nothing.txt')).toBe(true);
 
+    // Should produce the manifest, main and vendor scripts
+    expect(shell.ls('build/public/manifest-*.js').code).toBe(0);
+    expect(shell.ls('build/public/main-*.js').code).toBe(0);
+    expect(shell.ls('build/public/vendor-*.js').code).toBe(0);
+
     expect(output.code).toBe(0);
   });
 

packages/kyt-core/config/__tests__/webpack.test.js

@@ -6,19 +6,28 @@ const logger = {
   warn: jest.fn(),
 };
 
+const path = {
+  join: jest.fn(),
+  resolve: jest.fn(),
+};
+
 const webpack = {
   LoaderOptionsPlugin: jest.fn(),
   optimize: {
     UglifyJsPlugin: jest.fn(),
     LimitChunkCountPlugin: jest.fn(),
+    CommonsChunkPlugin: jest.fn(),
+    AggressiveMergingPlugin: jest.fn(),
   },
   BannerPlugin: jest.fn(),
   NoEmitOnErrorsPlugin: jest.fn(),
   HotModuleReplacementPlugin: jest.fn(),
   DefinePlugin: jest.fn(),
+  HashedModuleIdsPlugin: jest.fn(),
 };
 
 jest.setMock('shelljs', shell);
+jest.setMock('path', path);
 jest.setMock('kyt-utils/logger', logger);
 jest.setMock('webpack', webpack);
 jest.setMock('../../utils/getPostcssLoader', {});

packages/kyt-core/config/webpack.dev.client.js

@@ -2,8 +2,9 @@
 // Development webpack config for client code
 
 const webpack = require('webpack');
-const AssetsPlugin = require('assets-webpack-plugin');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
 const clone = require('lodash.clonedeep');
+const path = require('path');
 const { clientSrcPath, buildPath, assetsBuildPath } = require('kyt-utils/paths')();
 const postcssLoader = require('../utils/getPostcssLoader');
 
@@ -69,9 +70,13 @@ module.exports = (options) => {
 
       new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
 
-      new AssetsPlugin({
-        filename: options.clientAssetsFile,
-        path: buildPath,
+      new WebpackAssetsManifest({
+        output: path.join(buildPath, options.clientAssetsFile),
+        space: 2,
+        writeToDisk: true,
+        fileExtRegex: /\.\w{2,4}\.(?:map|gz)$|\.\w+$/i,
+        merge: false,
+        publicPath: options.publicPath,
       }),
 
       new webpack.HotModuleReplacementPlugin(),

packages/kyt-core/config/webpack.prod.client.js

@@ -3,10 +3,11 @@
 
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const AssetsPlugin = require('assets-webpack-plugin');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
 const clone = require('lodash.clonedeep');
 const postcssLoader = require('../utils/getPostcssLoader');
 const { clientSrcPath, assetsBuildPath, buildPath } = require('kyt-utils/paths')();
+const path = require('path');
 
 const cssStyleLoaders = [
   {
@@ -77,9 +78,30 @@ module.exports = options => ({
       sourceMap: true,
     }),
 
-    new AssetsPlugin({
-      filename: options.clientAssetsFile,
-      path: buildPath,
+    new WebpackAssetsManifest({
+      output: path.join(buildPath, options.clientAssetsFile),
+      space: 2,
+      writeToDisk: true,
+      fileExtRegex: /\.\w{2,4}\.(?:map|gz)$|\.\w+$/i,
+      merge: false,
+      publicPath: options.publicPath,
     }),
+
+    // Modules should get deterministic ids so that they don't change between builds
+    new webpack.HashedModuleIdsPlugin(),
+
+    // Extract all 3rd party modules into a separate chunk
+    // Only include vendor modules as needed,
+    // https://github.com/webpack/webpack/issues/2372#issuecomment-213149173
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: ({ resource }) => /node_modules/.test(resource),
+    }),
+
+    // Generate a 'manifest' chunk to be inlined
+    new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }),
+
+    // Merge bundles that would otherwise be negligibly small
+    new webpack.optimize.AggressiveMergingPlugin(),
   ],
 });

packages/kyt-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyt",
-  "version": "0.6.0-alpha.3",
+  "version": "0.6.0-alpha.5",
   "description": "kyt is a toolkit that encapsulates and manages the configuration for web apps.",
   "author": "NYTimes",
   "license": "Apache-2.0",
@@ -14,7 +14,6 @@
     "node": ">=6.1.0"
   },
   "dependencies": {
-    "assets-webpack-plugin": "3.5.1",
     "autoprefixer": "7.1.1",
     "babel-cli": "6.18.0",
     "babel-core": "6.18.0",
@@ -37,15 +36,15 @@
     "eslint-plugin-react": "6.10.0",
     "express": "4.14.0",
     "extract-text-webpack-plugin": "2.1.0",
-    "file-loader": "0.11.1",
+    "file-loader": "0.10.1",
     "filesize": "3.3.0",
     "glob": "7.1.0",
     "gzip-size": "3.0.0",
     "identity-obj-proxy": "3.0.0",
     "inquirer": "1.2.1",
     "install": "0.8.1",
     "jest": "19.0.2",
-    "kyt-utils": "0.1.1-alpha.3",
+    "kyt-utils": "0.1.1-alpha.5",
     "lodash.clonedeep": "4.5.0",
     "lodash.merge": "4.6.0",
     "lodash.once": "4.1.1",
@@ -65,6 +64,7 @@
     "temp": "0.8.3",
     "url-loader": "0.5.8",
     "webpack": "2.6.0",
+    "webpack-assets-manifest": "0.6.2",
     "webpack-dev-middleware": "1.10.2",
     "webpack-dev-server": "2.4.5",
     "webpack-hot-middleware": "2.18.0",