彻底解决antd的按需加载问题

最近也碰到了这个问题，现在能找到的解决方案大致是这样。

使用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
    })
  ]
}