Ant-design-vue 优化icons 包体积
之前antd-vue 引入了全量icons, 优化没成功，可能是版本问题，记录下，需要创建一个文件导出对应使用的icon，然后在webpack配置里面加个alias，体积较小200多K。
antd-icons.js：需要注意不同的类型图标目录和名称不一样哈，fill outline……， 有些组件自带图标的也需要引入，比如message的成功失败告警灯图标，可以看node_modules里面查看具体导出的模块名称，查看未知图标，页面审查看class名称
javascript
export { default as PaperClipOutline } from "@ant-design/icons/lib/outline/PaperClipOutline";
export { default as DeleteOutline } from "@ant-design/icons/lib/outline/DeleteOutline";
export { default as CheckCircleFill } from "@ant-design/icons/lib/fill/CheckCircleFill";
export { default as InfoCircleFill } from "@ant-design/icons/lib/fill/InfoCircleFill";
export { default as ExclamationCircleFill } from "@ant-design/icons/lib/fill/ExclamationCircleFill";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";export { default as PaperClipOutline } from "@ant-design/icons/lib/outline/PaperClipOutline";
export { default as DeleteOutline } from "@ant-design/icons/lib/outline/DeleteOutline";
export { default as CheckCircleFill } from "@ant-design/icons/lib/fill/CheckCircleFill";
export { default as InfoCircleFill } from "@ant-design/icons/lib/fill/InfoCircleFill";
export { default as ExclamationCircleFill } from "@ant-design/icons/lib/fill/ExclamationCircleFill";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";vue.config.js 配置片段，文章末尾是全部配置：
javascript
alias: {
"@ant-design/icons/lib/dist$": resolve("./src/util/antd-icons.js"), //解决官方包icons 全量引入
},开发环境：
╰─**$** node -v
v14.16.0
╰─**$** npm -v
6.14.11
脚手架：@vue/cli 4.5.11
ant-design-vue 版本
╰─**$** yarn list | grep ant
├─ @ant-design/colors@3.2.2
├─ @ant-design/icons-vue@2.0.0
│ ├─ @ant-design/colors@^3.1.0
├─ @ant-design/icons@2.1.1
├─ ant-design-vue@1.7.4
│ ├─ @ant-design/icons-vue@^2.0.0
│ ├─ @ant-design/icons@^2.1.1
│ ├─ http-cache-semantics@3.8.1
javascript
//https://cli.vuejs.org/zh/config/
const resolve = (dir) => require("path").join(__dirname, dir);
const CompressionWebpackPlugin = require("compression-webpack-plugin"); //版本5.0.1 下面写法高版本不支持
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg|png)(\?.*)?$/i;
const webpack = require("webpack");
module.exports = {
// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
// where to output built files
outputDir: "dist", //
lintOnSave: "warning",
productionSourceMap: false,
configureWebpack: {
plugins: [
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/), //减小moment语言包体积
],
resolve: {
alias: {
"@ant-design/icons/lib/dist$": resolve("./src/util/antd-icons.js"), //解决官方包icons 全量引入
},
},
},
chainWebpack: (config) => {
// config.resolve.alias.set("_css_", resolve("src/assets/css")); //test 设置别名
// 开发环境不需要gzip 等
if (process.env. NODE_ENV === "production") {
config.plugin("CompressionWebpackPlugin").use(
new CompressionWebpackPlugin({
// filename: '[path].gz[query]',
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 1024,
// minRatio: 0.8,
// deleteOriginalAssets: true //需要保留原文件
})
);
config.module
.rule("images")
.test(/\.(png|jpe?g|gif)(\?.*)?$/) //TODO： svg 有点问题
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
bypassOnDebug: true,
})
.end();
}
},
css: {
loaderOptions: {
// // 给 less-loader 传递 Less.js 相关选项
less: {
// http://lesscss.org/usage/#less-options-strict-units `Global Variables`
// `primary` is global variables fields name
globalVars: {
hack: `true; @import '~@/assets/css/var.less';`,
},
modifyVars: {
},
javascriptEnabled: true,
},
},
},
devServer: {
open: process.platform === "darwin",
host: "0.0.0.0",
port: 3666, //前端开发启动的端口
https: false,
hotOnly: false,
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
proxy: {
"/api": {
target: "", //后台API地址
changeOrigin: true,
},
}, // string | Object
before: (app) => {},
},
};