这段时间花了点儿时间看了下umi的官网,并且下载了官网提供的例子,整理了下自己配置umi分包的配置,只是整理,希望大佬们轻喷!
首先想吐槽下官网的例子,真的很“简洁”,经过度娘搜索,发现没有很多答案,大概的配置都是类似这种
vendors: {
name: 'vendors',
chunks: 'all',
test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|lodash|lodash-decorators|redux-saga|re-select|dva|moment)[\\/]/,
priority: -10,
},
然后我觉得这么配置没什么毛病,也就配置到自己的项目中,我这里是直接按着官网的步骤init项目,然后问题就来了,一直在报file ant.js don't exists in chunksMap这种错误,没有打包成功。第一想法可能是我项目哪里配错了,然后回顾整个步骤发现并没有什么大问题,提issues好像似乎很卑微,也没有理我,最后捣鼓了好久,只剩下可能是node包的问题,换了node的版本
从最新的换到了8的版本似乎不可以,最后换到了10,惊奇的发现可以了,随后的版本应该还可以但是我没有试了,大家自行试一下。然后查看官网的例子,觉得官网ant-pro的例子中的分包写法也可以使用,就加到自己的项目中
import path from 'path';
import * as IWebpackChainConfig from 'webpack-chain';
function getModulePackageName(module: { context: string }) {
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: string | null = moduleDirName;
if (packageName && packageName.match('^_')) {
// eslint-disable-next-line prefer-destructuring
packageName = packageName.match(/^_(@?[^@]+)/)![1];
}
return packageName;
}
export const chainWebpack = (config: IWebpackChainConfig) => {
config.optimization
.runtimeChunk(false)
.splitChunks({
chunks: 'async',
minSize: 0,
cacheGroups: {
vendors: {
chunks: 'all',
name: 'vendors',
test: (module: { context: string }) => {
const packageName = getModulePackageName(module) || '';
if (packageName) {
return [
'react',
'react-dom',
'react-router',
'react-router-dom',
'lodash',
'lodash-decorators',
'redux-saga',
're-select',
'dva',
'moment',
'postcss-px2rem'
].includes(packageName);
}
return false;
},
priority: 10
},
antd: {
name: "argrace",
test: /[\\/]node_modules[\\/](@ant-design|antd|antd-mobile)[\\/]/,
chunks: "all",
priority: 9
}
}
})
}
第一次发表文章,感谢大家支持!!!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。