使用babel-plugin-import按需加载antd3组件，打包后文件还很大的问题。

最近项目中使用的UI组件库，由antd2升级到了antd3，webpack打包逻辑不变，并且用了babel-plugin-import使组件按需加载。
但是打包后发现，打包后的文件还是很大，压缩之后超过1M，最后查找原因发现：

plugins: [
	         ["import", {
	              "libraryName": "antd",
	              "libraryDirectory": "es",
	              "style": "css" // `style: true` 会加载 less 文件
	          }]
	      ]

当配置了按需加载的插件后，打包确实是按需加载的，但是打包后文件依然很大的原因是：

当babel-plugin-import插件中"style":"css"会加载css文件，当style: true会加载less文件
如果你没有对antd3中的css文件进行抽离，那么css文件将会打包到js文件中，以嵌入式的方式写在html文件的header标签中。
所以你打包之后的js文件依然会很大。

那么我们怎么抽离antd3中的样式文件呢？

1.如果你在按需加载插件中配置的是style:css
那么我们的css-loader配置项应该是这样：

{
	test:/\.css$/,
	use:[
		'style-loader',
		MiniCssExtractPlugin.loader,
		{
			loader: "css-loader",
			options:{
				importLoaders:1
			}
		},
		{
			loader: "postcss-loader",
			options: {
				plugins: [
					require('./text-decoration-skip'),
					require('autoprefixer')
				]
			}
		}
	]
}

其中使用mini-css-extract-plugin插件来抽离公共的css样式。

2.如果你在按需加载插件中配置的是style:true,那么antd会加载less文件作为样式文件。
那么我们的less-loader配置项应该是这样：

{
    test: /\.less$/,
    exclude: NODE_MODULES,
    include: SRC_PATH,
    use: [MiniCssExtractPlugin.loader , "css-loader", "less-loader", {
            loader: "postcss-loader",
            options: {
                plugins: [
                    require('autoprefixer')
                ]
            }
        }]
},

这样分离出去的样式文件单独打包，js文件体积会大大减小。

当然，webpack打包的优化点很多，上部分所述只是简单的一个点，如果你的出现同样的问题，那么可以按照这个思路去查找，是否因为样式文件被打包进js文件中导致。

希望能帮到你！