使用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文件中導致。

希望能幫到你！