Use cache-loader to speed up development docs site builds (#1841)

The docs site build takes a long time to finish and serve during development. This PR applies `cache-loader` during development. I saw a time reduction from 183s to 18s.

.gitignore

@@ -18,7 +18,7 @@ es/
 .yo-rc.json
 npm-debug.log
 yarn-error.log
-eui.d.ts
+.cache-loader
 
 # typescript output
 types/

.npmignore

@@ -23,3 +23,4 @@ scripts/!(postinstall.js)
 .yo-rc.json
 package-lock.json
 npm-debug.log
+.cache-loader

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `10.0.1`.
+- Use `cache-loader` to speed up development docs site build ([#1841](https://github.com/elastic/eui/pull/1841)
 
 ## [`10.0.1`](https://github.com/elastic/eui/tree/v10.0.1)
 

package.json

@@ -13,7 +13,7 @@
     "start": "webpack-dev-server --port 8030 --inline --hot --config=src-docs/webpack.config.js",
     "test-docker": "docker pull $npm_package_docker_image && docker run --rm -i -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test --user=$(id -u):$(id -g) -e HOME=/tmp -v $(pwd):/app -w /app $npm_package_docker_image bash -c 'npm config set spin false && /opt/yarn*/bin/yarn && npm run test && npm run build'",
     "sync-docs": "node ./scripts/docs-sync.js",
-    "build-docs": "webpack --config=src-docs/webpack.config.js",
+    "build-docs": "NODE_ENV=production webpack --config=src-docs/webpack.config.js",
     "build": "yarn extract-i18n-strings && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && node ./scripts/compile-scss.js $npm_package_name",
     "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn lint-es && yarn lint-ts && yarn lint-sass && yarn lint-framer",
@@ -96,6 +96,7 @@
     "babel-plugin-pegjs-inline-precompile": "^0.1.0",
     "babel-plugin-react-docgen": "^2.0.0",
     "babel-template": "^6.26.0",
+    "cache-loader": "^2.0.1",
     "chai": "^4.1.2",
     "chai-webdriverio": "^0.4.3",
     "chalk": "^2.4.1",

src-docs/webpack.config.js

@@ -3,6 +3,16 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
+const isDevelopment = process.env.NODE_ENV !== 'production' && process.env.CI == null;
+
+function useCache(loaders) {
+  if (isDevelopment) {
+    return ['cache-loader'].concat(loaders);
+  }
+
+  return loaders;
+}
+
 module.exports = {
   mode: 'development',
 
@@ -26,15 +36,15 @@ module.exports = {
   module: {
     rules: [{
       test: /\.(js|tsx?)$/,
-      loader: 'babel-loader',
+      loaders: useCache(['babel-loader']),
       exclude: /node_modules/
     }, {
       test: /\.scss$/,
-      loaders: ['style-loader/useable', 'css-loader', 'postcss-loader', 'sass-loader'],
+      loaders: useCache(['style-loader/useable', 'css-loader', 'postcss-loader', 'sass-loader']),
       exclude: /node_modules/
     }, {
       test: /\.css$/,
-      loaders: ['style-loader/useable', 'css-loader'],
+      loaders: useCache(['style-loader/useable', 'css-loader']),
       exclude: /node_modules/
     }, {
       test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
@@ -57,10 +67,12 @@ module.exports = {
       cache: true,
       showErrors: true
     }),
+
     new CircularDependencyPlugin({
       exclude: /node_modules/,
       failOnError: true,
     }),
+
     // run TypeScript and tslint during webpack build
     new ForkTsCheckerWebpackPlugin({
       tsconfig: path.resolve(__dirname, '..', 'tsconfig.json'),

yarn.lock

@@ -2401,6 +2401,17 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+cache-loader@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-2.0.1.tgz#5758f41a62d7c23941e3c3c7016e6faeb03acb07"
+  integrity sha512-V99T3FOynmGx26Zom+JrVBytLBsmUCzVG2/4NnUKgvXN4bEV42R1ERl1IyiH/cvFIDA1Ytq2lPZ9tXDSahcQpQ==
+  dependencies:
+    loader-utils "^1.1.0"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.0"
+    normalize-path "^3.0.0"
+    schema-utils "^1.0.0"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -9203,7 +9214,7 @@ negotiator@0.6.1:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
   integrity sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=
 
-neo-async@^2.5.0:
+neo-async@^2.5.0, neo-async@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
   integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
@@ -9493,6 +9504,11 @@ normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"