Optimize asset chunking

ant-design · Mar 3, 2019 · 6eced87 · 6eced87
1 parent 30bdfb3
commit 6eced87
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git 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
@@ -4,6 +4,24 @@ 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('^_')) {
+    packageName = packageName.match(/^_(@?[^@]+)/)[1];
+  }
+  return packageName;
+}
+
 export default config => {
   // pro 和 开发环境再添加这个插件
   if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
@@ -30,4 +48,35 @@ export default config => {
       },
     ]);
   }
+  // optimize chunks
+  config.optimization
+    .runtimeChunk(false) // share the same chunks across different modules
+    .splitChunks({
+      chunks: 'all',
+      name: 'vendors',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendors: {
+          test: (module, chunk) => {
+            const packageName = getModulePackageName(module);
+            if (packageName) {
+              return packageName in ['bizcharts', '@antv_data-set', '@ant-design_icons'];
+            }
+            return false;
+          },
+          name(module) {
+            const packageName = getModulePackageName(module);
+
+            if (packageName in ['bizcharts', '@antv_data-set']) {
+              return 'viz'; // visualization package
+            }
+            if (packageName in ['@ant-design_icons']) {
+              return 'icons';
+            }
+            return 'misc';
+          },
+        },
+      },
+    });
 };