最近项目中使用的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文件中导致。
希望能帮到你!