chore(webpack): use CDNs and dll plugin

.gitignore

@@ -10,3 +10,4 @@ coverage/
 dist/
 docs/build
 docs/app/docgenInfo.json
+dll/

build/webpack.config.js

@@ -2,6 +2,8 @@ import config from '../config'
 import webpack from 'webpack'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import _ from 'lodash'
+import yargs from 'yargs'
+const { argv } = yargs
 
 const { paths } = config
 const { __BASE__, __DEV__, __TEST__ } = config.compiler_globals
@@ -25,7 +27,7 @@ const webpackConfig = {
 
 const webpackHotPath = `${config.compiler_public_path}__webpack_hmr`
 
-const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map({
+export const webpackHotMiddlewareEntry = `webpack-hot-middleware/client?${_.map({
   path: webpackHotPath,   // The path which the middleware is serving the event stream on
   timeout: 2000,          // The time to wait after a disconnection before attempting to reconnect
   overlay: true,          // Set to false to disable the DOM-based client-side overlay.
@@ -72,6 +74,10 @@ webpackConfig.plugins = [
     jQuery: 'jquery',
     'window.jQuery': 'jquery',
   }),
+  new webpack.DllReferencePlugin({
+    context: paths.base('node_modules'),
+    manifest: require(paths.base('dll/vendor-manifest.json')),
+  }),
   new HtmlWebpackPlugin({
     template: paths.docsSrc('index.ejs'),
     baseHref: __BASE__,
@@ -81,6 +87,13 @@ webpackConfig.plugins = [
     minify: {
       collapseWhitespace: true,
     },
+    versions: {
+      sui: require('semantic-ui-css/package.json').version,
+      highlightjs: require('highlight.js/package.json').version,
+      faker: require('faker/package.json').version,
+      jquery: require('jquery/package.json').version,
+      lodash: require('lodash/package.json').version,
+    },
   }),
 ]
 
@@ -114,7 +127,9 @@ if (!__TEST__) {
 // No Parse
 // ------------------------------------
 webpackConfig.module.noParse = [
-  /autoit.js/,    // highlight.js dep throws if parsed
+  // highlight.js dep throws if parsed
+  /autoit/,
+  /\.json$/,
 ]
 
 // ------------------------------------
@@ -141,18 +156,52 @@ webpackConfig.module.loaders = [{
   //
   test: /\.json$/,
   loader: 'json',
-}, {
-  //
-  // SASS
-  //
-  test: /\.s?css$/,
-  loaders: ['style', 'css', 'sass'],
-}, {
-  //
-  // Files
-  //
-  test: /\.(eot|ttf|woff|woff2|svg|png)$/,
-  loader: 'file',
 }]
 
+// ----------------------------------------
+// Local Modules
+// ----------------------------------------
+// For faster builds in dev, rely on prebuilt libraries
+// Local modules can still be enabled (ie for offline development)
+if (argv.localModules) {
+  webpackConfig.module.loaders = [
+    ...webpackConfig.module.loaders,
+    {
+      //
+      // SASS
+      //
+      test: /\.s?css$/,
+      loaders: ['style', 'css', 'sass'],
+    }, {
+      //
+      // Files
+      //
+      test: /\.(eot|ttf|woff|woff2|svg|png)$/,
+      loader: 'file',
+    },
+  ]
+} else {
+  webpackConfig.module.noParse = [
+    ...webpackConfig.module.noParse,
+    // /faker/,
+    /jquery/,
+    // /lodash/,
+    /semantic-ui-css\/semantic\.js/,
+    /semantic-ui-css\/semantic\.css/,
+  ]
+
+  webpackConfig.resolve.alias = {
+    ...webpackConfig.resolve.alias,
+    'semantic-ui-css/semantic.js': 'empty',
+    'semantic-ui-css/semantic.css': 'empty',
+    'highlight.js/styles/github.css': 'empty',
+  }
+
+  webpackConfig.externals = {
+    jquery: 'jQuery',
+    faker: 'faker',
+    lodash: '_',
+  }
+}
+
 export default webpackConfig

build/webpack.dll.js

@@ -0,0 +1,63 @@
+import webpack from 'webpack'
+
+import config from '../config'
+const webpackDllConfig = { module: {} }
+
+const { paths } = config
+
+// ------------------------------------
+// Entry Points
+// ------------------------------------
+webpackDllConfig.entry = {
+  vendor: config.compiler_vendor,
+}
+
+// ------------------------------------
+// Bundle Output
+// ------------------------------------
+webpackDllConfig.output = {
+  ...webpackDllConfig.output,
+  path: 'dll',
+  filename: `dll.[name].[${config.compiler_hash_type}].js`,
+  library: '[name]_[hash]',
+}
+
+// ------------------------------------
+// Plugins
+// ------------------------------------
+webpackDllConfig.plugins = [
+  new webpack.DllPlugin({
+    path: paths.base('dll', '[name]-manifest.json'),
+    name: '[name]_[hash]',
+  }),
+]
+
+// ------------------------------------
+// Pre-Loaders
+// ------------------------------------
+webpackDllConfig.module.preLoaders = []
+
+// ------------------------------------
+// Loaders
+// ------------------------------------
+webpackDllConfig.module.loaders = [{
+  //
+  // JSON
+  //
+  test: /\.json$/,
+  loader: 'json',
+}, {
+  //
+  // SASS
+  //
+  test: /\.s?css$/,
+  loaders: ['style', 'css', 'sass'],
+}, {
+  //
+  // Files
+  //
+  test: /\.(eot|ttf|woff|woff2|svg|png)$/,
+  loader: 'file',
+}]
+
+export default webpackDllConfig

config/development.js

@@ -4,7 +4,7 @@ export default (config) => {
   const __BASE__ = `http://${config.server_host}:${config.server_port}/`
 
   return {
-    compiler_devtool: 'source-map',
+    compiler_devtool: 'eval-cheap-module-source-map',
     compiler_public_path: __BASE__,
     compiler_globals: {
       ...config.compiler_globals,

docs/app/index.ejs

@@ -4,6 +4,12 @@
   <meta charset="UTF-8">
   <!-- baseHref value already includes quotes "/foo" -->
   <base href=<%= htmlWebpackPlugin.options.baseHref %> />
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/<%= htmlWebpackPlugin.options.versions.highlightjs %>/styles/github.min.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/<%= htmlWebpackPlugin.options.versions.jquery %>/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/<%= htmlWebpackPlugin.options.versions.lodash %>/lodash.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/<%= htmlWebpackPlugin.options.versions.sui %>/semantic.min.js"></script>
   <title>Stardust</title>
   <script>
     // Apply gh-pages SPA redirect that was applied in 404.html

gulp/tasks/dll.js

@@ -0,0 +1,33 @@
+import { task } from 'gulp'
+import loadPlugins from 'gulp-load-plugins'
+import webpack from 'webpack'
+
+import config from '../../config'
+
+const g = loadPlugins()
+const { log, PluginError } = g.util
+
+task('dll', (cb) => {
+  const webpackDLLConfig = require('../../build/webpack.dll').default
+  const compiler = webpack(webpackDLLConfig)
+
+  compiler.run((err, stats) => {
+    const { errors, warnings } = stats.toJson()
+
+    log(stats.toString(config.compiler_stats))
+
+    if (err) {
+      log('Webpack compiler encountered a fatal error.')
+      throw new PluginError('webpack', err.toString())
+    }
+    if (errors.length > 0) {
+      log('Webpack compiler encountered errors.')
+      throw new PluginError('webpack', errors.toString())
+    }
+    if (warnings.length > 0 && config.compiler_fail_on_warning) {
+      throw new PluginError('webpack', warnings.toString())
+    }
+
+    cb(err)
+  })
+})

gulp/tasks/docs.js

@@ -1,10 +1,9 @@
 import del from 'del'
-import { task, src, dest, series } from 'gulp'
+import { task, src, dest, parallel, series } from 'gulp'
 import loadPlugins from 'gulp-load-plugins'
 import webpack from 'webpack'
 
 import config from '../../config'
-import webpackConfig from '../../build/webpack.config'
 
 const g = loadPlugins()
 const { log, PluginError } = g.util
@@ -32,6 +31,7 @@ task('generate-docs-json', () => {
 })
 
 task('webpack-docs', (cb) => {
+  const webpackConfig = require('../../build/webpack.config').default
   const compiler = webpack(webpackConfig)
 
   compiler.run((err, stats) => {
@@ -60,4 +60,11 @@ task('docs-html', (cb) => {
     .pipe(dest(config.paths.docsDist()))
 })
 
-task('docs', series('clean-docs', 'generate-docs-json', 'webpack-docs', 'docs-html'))
+task('docs', series(
+  parallel(
+    'dll',
+    'generate-docs-json',
+    'docs-html'
+  ),
+  'webpack-docs',
+))

gulp/tasks/serve.js

@@ -7,12 +7,12 @@ import WebpackHotMiddleware from 'webpack-hot-middleware'
 import historyApiFallback from 'connect-history-api-fallback'
 
 import config from '../../config'
-import webpackConfig from '../../build/webpack.config'
 
 const g = loadPlugins()
 const { log, colors } = g.util
 
 const serve = (cb) => {
+  const webpackConfig = require('../../build/webpack.config').default
   const app = express()
   const compiler = webpack(webpackConfig)
 
@@ -39,4 +39,4 @@ const serve = (cb) => {
     })
 }
 
-task('serve', series('clean-docs', 'generate-docs-json', serve))
+task('serve', series('dll', serve))

package.json

@@ -23,6 +23,8 @@
     "release:minor": "ta-script npm/release.sh minor",
     "release:patch": "ta-script npm/release.sh patch",
     "start": "npm run docs",
+    "start:local-modules": "npm run docs -- --local-modules",
+    "pretest": "gulp dll",
     "test": "NODE_ENV=test babel-node $(npm bin)/karma start build/karma.conf.babel.js",
     "test:watch": "npm run test --silent -- --watch"
   },