記react中antd打包的坑體積太大和className命名

前端使用antd的時後打包體積太大， 如圖1.6M還是挺大的，把antd所有的資源都加載進入了

根據antd 官網的推薦，按需加載方式居於.babel配置

這樣再來看看打包分析的

按需加載打包了button和layout 在src文件下也只引用了這個兩個組件

這樣做很方便的，同時要在entry這裏在添加一個antd就不對了, 又把整個antd打包進來了， 這樣就不對了

entry: {
		app: ['./src/js/index.js'],	//入口文件
		antd: ['antd']
	},

寫到這裏還有個問題在用到了css-loader中localIdentName 屬性時，要避免antd的css類名被修改

var cssLoader = {
		loader: 'css-loader',
		options: {
			localIdentName: '[local]--[hash:base64:6]'
		}
	}

就需要用loader 中的 exclude 和include 來出來，這兩個屬性都需要用上

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    'style-loader'
  ]
},
{
  test: /\.css$/,
  include: /src/,
  use: [
    'style-loader'
  ]
}

具體做法如下

// booLocal 是否使用原來的class， /node_modules/中
exports.cssLoaders = function (options, booLocal) {
	options = options || {}
	var cssLoader = {
		loader: 'css-loader',
		options: {
			minimize: process.env.NODE_ENV === 'production',
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',
		}
	}

	// generate loader string to be used with extract text plugin
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader];
		if (loader) {
			loaders.push({
				loader: loader + '-loader',
				options: Object.assign({}, loaderOptions, {
					sourceMap: options.sourceMap
				})
			})
		}
		if (options.extract) {
			return ExtractTextPlugin.extract({
				use: loaders,
				publicPath: '../../', //解決 build css bg img 加載路徑不對問題
			    fallback: 'react-style-loader' 
			})
		} else {
			return ['react-style-loader'].concat(loaders)
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less'),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus')
	}
}

exports.styleLoaders = function (options) {
	var output = []
	var loaders = exports.cssLoaders(options, false)
	var loadersLocal = exports.cssLoaders(options, true)
	
	for (var extension in loaders) {
		var loader = loaders[extension]
		var loaderLocal = loadersLocal[extension]
		
		output.push(
			{
				test: new RegExp('\\.' + extension + '$'),
				use: loaderLocal,
				include: /node_modules/,
			},{
				test: new RegExp('\\.' + extension + '$'),
				use: loader,
				exclude: /node_modules/,
			}
		)
	}
	return output
}

這src 裏的class 重新命名就防止了與/node_modules/中引用的混合