最近也碰到了這個(gè)問題溃卡，現(xiàn)在能找到的解決方案大致是這樣竞漾。
使用babel-plugin-import
他可以解決antd按需加載的問題侮繁，解決思路是去相關(guān)的文件中替換深路徑结窘，如
import {Button} from ’antd'
替換為
import {Button} from 'antd/lib/button'
但是這種方法帶來的問題就是，如果在每一個(gè)按需加載的chunk中都單獨(dú)打包了相關(guān)的模塊底哗，這樣導(dǎo)致每一個(gè)chunk的體積都比較大岁诉。
使用webpack的externals配置
具體配置字段如下：
externals: {
"react": "React",
"react-dom": "ReactDOM",
'react-router': 'ReactRouter',
'jquery': 'jQuery',
'antd': 'antd',
},
配置了這個(gè)字段之后，webpack打包時(shí)會(huì)繞過這些引用跋选，但是帶來缺點(diǎn)就是需要在外部單獨(dú)引入(antd.min.js有1.1mb左右)涕癣。
有一點(diǎn)需要格外注意，就是externals和babel-plugin-import插件不要一起使用前标，因?yàn)閎abel-plugin-import會(huì)在前面運(yùn)行坠韩，此時(shí)組件中的相關(guān)引用已經(jīng)被替換為深路徑，所以externals配置將不會(huì)起作用炼列。
使用webpack的CommonsChunkPlugin組件
應(yīng)該屬于目前可以選擇的最佳方案
module.exports = {
entry: {
app: path.resolve(APP_PATH, 'entry/index.jsx'),
vendor: [
'react',
'react-dom',
'react-router'
],
antd: [
'antd/lib/button',
'antd/lib/icon'
]
},
output: {
path: BUILD_PATH,
filename: 'js/[name].js',
chunkFilename: 'js/[name].chunk.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['antd', 'vendor'],
minChunks: Infinity
})
]
}
