目前在名目中应用了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
发表回复