diff --git a/config/config.js b/config/config.js index 226d448ea8821b30b8a04f5389232383e91feda6..1ffa812e7f844c0d3281e7dba2d3de7729b7ddea 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 b9e842d26a900cceb0880b75c3e5c7489cb0c81f..2273586e6753a24ea561f7ff8764926e3985688a 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'; + }, + }, + }, + }); };