最近也碰到了这个问题,现在能找到的解决方案大致是这样。
使用babel-plugin-import
他可以解决antd按需加载的问题,解决思路是去相关的文件中替换深路径,如
import {Button} from ’antd'
替换为
import {Button} from 'antd/lib/button'
但是这种方法带来的问题就是,如果在每一个按需加载的chunk中都单独打包了相关的模块,这样导致每一个chunk的体积都比较大。
使用webpack的externals配置
具体配置字段如下:
externals: {
"react": "React",
"react-dom": "ReactDOM",
'react-router': 'ReactRouter',
'jquery': 'jQuery',
'antd': 'antd',
},
配置了这个字段之后,webpack打包时会绕过这些引用,但是带来缺点就是需要在外部单独引入(antd.min.js有1.1mb左右)。
有一点需要格外注意,就是externals和babel-plugin-import插件不要一起使用,因为babel-plugin-import会在前面运行,此时组件中的相关引用已经被替换为深路径,所以externals配置将不会起作用。
使用webpack的CommonsChunkPlugin组件
应该属于目前可以选择的最佳方案
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
})
]
}