⚡️ Use a DLL for tests

build/utils/index.js

@@ -3,14 +3,16 @@ const uppercamelcase = require('uppercamelcase')
 const {
   author,
   name,
-  version
+  version,
+  dllPlugin
 } = require('../../package.json')
 
 const authorName = author.replace(/\s+<.*/, '')
 const minExt = process.env.NODE_ENV === 'production' ? '.min' : ''
 
 exports.author = authorName
 exports.version = version
+exports.dllName = dllPlugin.name
 exports.moduleName = uppercamelcase(name)
 exports.filename = name + minExt
 exports.banner = `/*!

build/utils/log.js

@@ -0,0 +1,27 @@
+function logError (e) {
+  console.log(e)
+}
+
+function blue (str) {
+  return `\x1b[1m\x1b[34m${str}\x1b[39m\x1b[22m`
+}
+
+function green (str) {
+  return `\x1b[1m\x1b[32m${str}\x1b[39m\x1b[22m`
+}
+
+function red (str) {
+  return `\x1b[1m\x1b[31m${str}\x1b[39m\x1b[22m`
+}
+
+function yellow (str) {
+  return `\x1b[1m\x1b[33m${str}\x1b[39m\x1b[22m`
+}
+
+module.exports = {
+  blue,
+  green,
+  red,
+  yellow,
+  logError
+}

build/webpack.config.dev.js

@@ -1,17 +1,30 @@
+const webpack = require('webpack')
 const merge = require('webpack-merge')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const DashboardPlugin = require('webpack-dashboard/plugin')
 const base = require('./webpack.config.base')
-const { resolve } = require('path')
+const { resolve, join } = require('path')
+const { existsSync } = require('fs')
 const {
   filename,
+  dllName,
   moduleName
 } = require('./utils')
 
 const rootDir = resolve(__dirname, '../test')
 const buildPath = resolve(rootDir, 'dist')
 
+if (!existsSync(join(buildPath, dllName) + '.dll.js')) {
+  logError(red('The DLL manifest is missing. Please run `npm run build:dll` (Quit this with `q`)'))
+  process.exit(0)
+}
+
+const dllManifest = require(
+  join(buildPath, dllName) + '.json'
+)
+
 module.exports = merge(base, {
   entry: {
     tests: resolve(rootDir, 'visual.js'),
@@ -22,13 +35,38 @@ module.exports = merge(base, {
     chunkFilename: '[id].js',
   },
   plugins: [
+    new webpack.DllReferencePlugin({
+      context: join(__dirname, '..'),
+      manifest: dllManifest
+    }),
     new HtmlWebpackPlugin({
       chunkSortMode: 'dependency',
     }),
-    // new AddAssetHtmlPlugin({ filepath: require.resolve(
-    //   path.join(buildPath, dllName) + '.dll.js'
-    // ) }),
+    new AddAssetHtmlPlugin({
+      filepath: require.resolve(
+        join(buildPath, dllName) + '.dll.js'
+      )
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module, count) {
+        return (
+          module.resource &&
+            /\.js$/.test(module.resource) &&
+            module.resource.indexOf(join(__dirname, '../node_modules/')) === 0
+        )
+      }
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
     new DashboardPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      reportFilename: resolve(__dirname, `../reports/${process.env.NODE_ENV}.html`)
+    })
   ],
   devtool: '#eval-source-map',
   devServer: {

build/webpack.config.dll.js

@@ -0,0 +1,28 @@
+const { resolve, join } = require('path')
+const webpack = require('webpack')
+const pkg = require('../package.json')
+
+const rootDir = resolve(__dirname, '../test')
+const buildPath = resolve(rootDir, 'dist')
+
+const entry = {}
+entry[pkg.dllPlugin.name] = pkg.dllPlugin.include
+
+module.exports = {
+  devtool: '#source-map',
+  entry,
+  output: {
+    path: buildPath,
+    filename: '[name].dll.js',
+    library: '[name]'
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      name: '[name]',
+      path: join(buildPath, '[name].json')
+    })
+  ],
+  performance: {
+    hints: false
+  }
+}

package.json

@@ -7,6 +7,8 @@
   "scripts": {
     "dev": "webpack-dashboard -- webpack-dev-server --config build/webpack.config.dev.js",
     "test:unit": "cross-env BABEL_ENV=test karma start test/karma.conf.js --single-run",
+    "build:dll": "webpack --progress --config build/webpack.config.dll.js",
+    "postinstall": "yon run build:dll",
     "build": "yon run build:common && yon run build:browser && yon run build:browser:min",
     "build:browser": "cross-env NODE_ENV=browser yon run build:browser:base",
     "build:browser:base": "webpack --config build/webpack.config.browser.js --progress --hide-modules",
@@ -56,6 +58,20 @@
     "webpack-merge": "^2.6.1",
     "yarn-or-npm": "^2.0.3"
   },
+  "dllPlugin": {
+    "name": "visualTestingDeps",
+    "include": [
+      "mocha/mocha.js",
+      "vue/dist/vue.js",
+      "chai",
+      "core-js/library",
+      "url",
+      "sockjs-client",
+      "vue-style-loader/lib/addStylesClient.js",
+      "style-loader/addStyles.js",
+      "css-loader!mocha-css"
+    ]
+  },
   "babel": {
     "presets": [
       [