記react中antd打包的坑體積太大和className命名
阿新 • • 發佈:2018-12-04
前端使用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/中引用的混合