From 1d3223f45080135aa7e9f385ecef67e6ea8be91b Mon Sep 17 00:00:00 2001
From: avlyalin <lyalin.alexey@gmail.com>
Date: Sat, 6 Jun 2020 15:15:53 +0300
Subject: [PATCH] feat: webpack vendors chunks

---
 tailwind.config.js |  4 +++-
 webpack.config.js  | 22 ++++++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 3469b86..e879f8b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,8 +2,10 @@ const {
   colors: { transparent, current, black, white },
 } = require('tailwindcss/defaultTheme');
 
+const isDev = process.env.NODE_ENV === 'development';
+
 module.exports = {
-  purge: ['./src/**/*.js', './assets/index.html'],
+  purge: { enabled: !isDev, content: ['./src/**/*.js', './assets/index.html'] },
   theme: {
     colors: {
       transparent,
diff --git a/webpack.config.js b/webpack.config.js
index 599e7eb..080021c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,7 +7,7 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CopyPlugin = require('copy-webpack-plugin');
 
-const isDev = process.env.NODE_ENV !== 'production';
+const isDev = process.env.NODE_ENV === 'development';
 const isAnalysis = process.env.NODE_ENV === 'analysis';
 
 const plugins = [
@@ -36,6 +36,24 @@ module.exports = {
     filename: 'app.[hash].js',
   },
   optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: Infinity,
+      minSize: 5000,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            const packageName = module.context.match(
+              /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
+            )[1];
+
+            return `vendors.${packageName.replace('@', '')}`;
+          },
+        },
+      },
+    },
     minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
   },
   module: {
@@ -71,7 +89,7 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'react-dom': '@hot-loader/react-dom',
+      'react-dom': isDev ? '@hot-loader/react-dom' : 'react-dom',
       assets: path.resolve(__dirname, './assets'),
       src: path.resolve(__dirname, './src'),
       _storybook: path.resolve(__dirname, './.storybook'),