目前在項目中使用了ant-design-vue組件庫，官方有對其配置按需加載功能，但是在實際使用用過程中，很多沒有使用的組件還是被打包進(jìn)了項目牙勘，主要集中在@ant-design/icons、moment上所禀，占用了很大的體積
先配置組件的按需加載功能
<!--安裝按需引入插件-->
yarn add babel-plugin-import -D
<!-- babel.config.js -->
module.exports = {
presets: [
[
'@vue/cli-plugin-babel/preset',
{ useBuiltIns: 'entry', modules: 'commonjs' }
]
],
plugins: [
<!--ant-design-vue按需加載配置-->
[
'import',
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' },
'ant-design-vue'
],
<!--lodash按需加載配置-->
'lodash'
]
}
我們先上圖看看不做處理的情況下的大蟹矫妗：
moment插件
image
@ant-design/icons
image
現(xiàn)在開始著手解決這些冗余的代碼
moment處理方式：
1、在vue.config.js中使用externals配置排除掉moment
module.exports = {
...
configureWebpack:{
externals:['moment']
}
}
結(jié)果代碼運(yùn)行報錯色徘，提示找不到moment,應(yīng)該是ant-design-vue中有強(qiáng)依賴該插件恭金，所以這個處理方式走不通，然后度娘了一下褂策，找到了可以通過webpack中自帶的插件減小引用文件的體積
const webpack = require('webpack')
module.exports = {
...
configureWebpack:{
...
plugins:[
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/)
]
}
}
image
對比Gzip下體積減少了50KB,效果非常明顯
@ant-design/icons處理方式：
目前官方已經(jīng)在著手解決字體圖標(biāo)的按需加載功能横腿，具體時間未知
我們先看看廣大網(wǎng)友給出的一個很實用的解決方式吧
第一步：在項目中新建一個文件js文件
<!--icons.js-->
<!--如果項目中需要使用@ant-design的字體圖標(biāo)的情況-->
export { default as DoubleRightOutline } from '@ant-design/icons/lib/outline/DoubleRightOutline'
export { default as DoubleLeftOutline } from '@ant-design/icons/lib/outline/DoubleLeftOutline'
<!--不使用的情況-->
export {}
第二步：在vue.config.js中配置
const path = require('path')
module.exports = {
...
configureWebpack:{
...
resolve:{
alias: {
'@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/tools/icons.js') // 自建的文件的相對路徑
}
}
}
}
我的項目中沒有使用@ant-design/icons,所以build之后就看不到這個模塊了，最終的結(jié)果如下：
image
對比一下處理前后的整體項目的Gzip模式下的實際效果：
處理前：
image
處理后：
image
項目整體的大小減少了一半斤寂，??????
順便在提醒一下耿焊，如果項目中沒有使用loadsh,但是依賴的npm包中有使用，最好在項目中安裝一下loadsh的按需引入配置遍搞，你會發(fā)現(xiàn)體積又變小了一點搀别，可能是某些npm依賴中全部引入loadsh
