這段時間花了點兒時間看了下umi的官網,而且下載了官網提供的例子,整理了下本身配置umi分包的配置,只是整理,但願大佬們輕噴!
首先想吐槽下官網的例子,真的很「簡潔」,通過度娘搜索,發現沒有不少答案,大概的配置都是相似這種css
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的例子中的分包寫法也能夠使用,就加到本身的項目中node
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 } } }) }
第一次發表文章,感謝你們支持!!!react