目前在名目中应用了 ant-design-vue 组件库，民间有对其配置按需加载性能，然而在理论应用用过程中，很多没有应用的组件还是被打包进了名目，次要集中在 @ant-designicons、moment 上，占用了很大的体积
先配置组件的按需加载性能
<!-- 装置按需引入插件 -->
yarn add babel-plugin-import -D
<!-- babel.config.js -->
module.exports = {
presets: [
[
'@vuecli-plugin-babelpreset',
{useBuiltIns: 'entry', modules: 'commonjs'}
]
],
plugins: [
<!--ant-design-vue 按需加载配置 -->
[
'import',
{libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css'},
'ant-design-vue'
],
<!--lodash 按需加载配置 -->
'lodash'
]
}
咱们先上图看看不做解决的状况下的大小：
moment 插件
@ant-designicons
当初开始着手解决这些冗余的代码
moment 解决形式：
1、在 vue.config.js 中应用 externals 配置排除掉moment
module.exports = {
...
configureWebpack:{
externals:['moment']
}
}
后果代码运行报错，提醒找不到 moment, 应该是ant-design-vue 中有强依赖该插件，所以这个解决形式走不通，而后度娘了一下，找到了能够通过 webpack 中自带的插件减小援用文件的体积
const webpack = require('webpack')
module.exports = {
...
configureWebpack:{
...
plugins:[
new webpack.ContextReplacementPlugin(moment[\\]locale$, zh-cn)
]
}
}
比照 Gzip 下体积缩小了50KB, 成果非常明显
@ant-designicons 解决形式：
目前民间曾经在着手解决字体图标的按需加载性能，具体工夫未知
咱们先看看宽广网友给出的一个很实用的解决形式吧
第一步：在名目中新建一个文件 js 文件
<!--icons.js-->
<!-- 如果名目中须要应用 @ant-design 的字体图标的状况 -->
export {'须要应用的字体图标组件'} from '@ant-designicons'
<!-- 不应用的状况 -->
export {}
第二步：在 vue.config.js 中配置
const path = require('path')
module.exports = {
...
configureWebpack:{
...
resolve:{
alias: {
'@ant-designiconslibdist$': path.resolve(__dirname,'.srctoolsicons.js') 自建的文件的相对路径
}
}
}
}
我的名目中没有应用@ant-designicons, 所以 build 之后就看不到这个模块了，最终的后果如下：
比照一下解决前后的整体名目的 Gzip 模式下的实际效果：
解决前：
解决后：
名目整体的大小缩小了一半，????????????
顺便在揭示一下，如果名目中没有应用 loadsh, 然而依赖的npm 包中有应用，最好在名目中装置一下 loadsh 的按需引入配置，你会发现体积又变小了一点，可能是某些 npm 依赖中全副引入loadsh