From 6eced87272c372a3d7f2fe7553fa55898c32d307 Mon Sep 17 00:00:00 2001 From: Zhongjie Wu Date: Mon, 4 Mar 2019 01:59:02 +0800 Subject: [PATCH] Optimize asset chunking --- config/config.js | 4 ---- config/plugin.config.js | 49 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 4 deletions(-) diff --git a/config/config.js b/config/config.js index 226d448ea8..1ffa812e7f 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 b9e842d26a..eb2d7d3296 100644 --- 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'; + }, + }, + }, + }); };