antdv-项目打包上的优化
项目使用到的包版本:
注意,在 antdv 的 2.x 版本已经修复了 icon 相关的引入问题;
1
2
3
4
{
"ant-design-vue": "^1.7.4",
"vue": "^2.6.11"
}
moment.js 优化
主要参考https://github.com/jmblog/how-to-optimize-momentjs-with-webpack;
具体如何操作:
vue.config.js
1
2
3
4
5
6
const ContextReplacementPlugin = require('webpack').ContextReplacementPlugin;
module.exports = {
configureWebpack: () => {
return (plugin = [new ContextReplacementPlugin(/moment[/\\]locale$/, /zh\-cn/)]);
}
};
深入看了下包内部的源码,发现moment.js
每次都会全量引入所有的语言包,导致最后打包的结果变大,所以在这里配置只需要引入所需的语言包即可;
icon 按需引入的优化
主要参考https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
具体操作:建立icon.js
文件,这里写需要引入的 icon 组件,得去node_modules
依赖里面找,路径都是@ant-design/icons/lib
,然后看自己需要的是哪种,antd
有三种图标,然后还需要把引入的组件内部的 icon 也引进来,像我用到了日历等等…;找图标这一步比较麻烦,也可以看看异步加载图标库的策略,和用一个插件,详见:https://www.cnblogs.com/fulu/p/13255538.html;
GitHub 仓库关于 icon 问题的讨论 issue:https://github.com/ant-design/ant-design/issues/12011
这里用的是手动的方式:
先在目录下建立icon.js
:
1
2
3
4
5
6
7
8
// export what you need
export { default as UserOutline } from '@ant-design/icons/lib/outline/UserOutline';
export { default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline';
// export what antd other components need
export { default as LockOutline } from '@ant-design/icons/lib/outline/LockOutline';
export { default as CloseCircleTwoTone } from '@ant-design/icons/lib/twotone/CloseCircleTwoTone';
// and other icons...
vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
configureWebpack: () => {
return (resolve = {
alias: {
// vue$: "vue/dist/vue.esm.js",
'@': resolvePath('src'),
'~': resolvePath('src/api/api'),
'#': resolvePath('src/components'),
'@ant-design/icons/lib/dist$': resolvePath('src/utils/icon.js')
}
});
}
};
这边我也看了下源码库,因为antdv
是由antd
这个库发展来的,所以图标库沿用了antd
的,在node_modules\ant-design-vue\es\icon\index.js
这个文件里,头部可以看到这样的代码:
1
import * as allIcons from '@ant-design/icons/lib/dist';
可以看到从icon
库里引入了所有的 icon,而配置'@ant-design/icons/lib/dist$': resolvePath('src/utils/icon.js')
这个,就把这个路径换成了我们自己写的icon.js
这个文件了,这个文件做到了按需要的去加载icon
;
后记
虽然不知道为啥 antd 要用 moment,其实现在 day.js 也挺好用的,而且可以被 webpack 的 tree-shaking 优化;
而关于 icon 的问题呢,在react
版本的 antd 里 4.x 就对这个问题进行了优化,在vue
版本里 antdv2.x 进行了优化,可以在这里看到:https://2x.antdv.com/docs/vue/migration-v2-cn