From cb5a083410e5ff4aabe8a74081068de4374d5c4a Mon Sep 17 00:00:00 2001
From: Zhongjie Wu <www.zj30@gmail.com>
Date: Wed, 13 Mar 2019 13:48:06 +0800
Subject: [PATCH] Optimize asset chunking (#3650)

* Optimize asset chunking

* fix issues

* don't apply chunking on on non async assets
---
 config/config.js        |  4 ----
 config/plugin.config.js | 47 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/config/config.js b/config/config.js
index 226d448e..1ffa812e 100644
--- a/config/config.js
+++ b/config/config.js
@@ -75,10 +75,6 @@ export default {
   theme: {
     'primary-color': primaryColor,
   },
-  externals: {
-    '@antv/data-set': 'DataSet',
-    bizcharts: 'BizCharts',
-  },
   // proxy: {
   //   '/server/api/': {
   //     target: 'https://preview.pro.ant.design/',
diff --git a/config/plugin.config.js b/config/plugin.config.js
index b9e842d2..2273586e 100644
--- a/config/plugin.config.js
+++ b/config/plugin.config.js
@@ -4,6 +4,25 @@ import MergeLessPlugin from 'antd-pro-merge-less';
 import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
 import path from 'path';
 
+function getModulePackageName(module) {
+  if (!module.context) return null;
+
+  const nodeModulesPath = path.join(__dirname, '../node_modules/');
+  if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
+    return null;
+  }
+
+  const moduleRelativePath = module.context.substring(nodeModulesPath.length);
+  const [moduleDirName] = moduleRelativePath.split(path.sep);
+  let packageName = moduleDirName;
+  // handle tree shaking
+  if (packageName.match('^_')) {
+    // eslint-disable-next-line prefer-destructuring
+    packageName = packageName.match(/^_(@?[^@]+)/)[1];
+  }
+  return packageName;
+}
+
 export default config => {
   // pro 和 开发环境再添加这个插件
   if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
@@ -30,4 +49,32 @@ export default config => {
       },
     ]);
   }
+  // optimize chunks
+  config.optimization
+    .runtimeChunk(false) // share the same chunks across different modules
+    .splitChunks({
+      chunks: 'async',
+      name: 'vendors',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendors: {
+          test: module => {
+            const packageName = getModulePackageName(module);
+            if (packageName) {
+              return ['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0;
+            }
+            return false;
+          },
+          name(module) {
+            const packageName = getModulePackageName(module);
+
+            if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
+              return 'viz'; // visualization package
+            }
+            return 'misc';
+          },
+        },
+      },
+    });
 };
-- 
GitLab