原文鏈接： https://wuweijun.cn/2020/11/vue-cli-moment-ie11-ant-design/#more
減小moment.js的體積
一般如果項(xiàng)目引入了moment.js或者引入的某個(gè)第三方插件包使用了moment.js锄列， 通常情況下图云，會(huì)全部引入了所有語(yǔ)言包，體積過大右蕊，我們需按需引入琼稻，只打包我們需要的語(yǔ)言包，默認(rèn)引入英文饶囚。
在vue.config.js中添加配置帕翻，
const webpack = require('webpack');
module.exports = {
// ******
configureWebpack: {
// externals:['moment'], //項(xiàng)目中引用了moment 不能使用
plugins:[
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn/) //減小moment語(yǔ)言包體積
],
//省略其他配置*******
}
//省略其他配置*******
}
配置后，只保留了中文
當(dāng)然更好的方案是使用現(xiàn)在新的庫(kù)替代moment萝风，如果情況允許的話嘀掸，比如：day.js、date-fns规惰；因?yàn)橛行├系牟寮撬瑤?kù)會(huì)依賴moment，因此我們做選擇的時(shí)候就應(yīng)該考慮到這點(diǎn)歇万。
適配IE11 antd IE11下有問題
我們項(xiàng)目是由我?guī)е盅邪l(fā)小伙伴加外包一起弄的揩晴，我的首頁(yè)比較簡(jiǎn)單沒有引入大型框架，然而我們其他頁(yè)面引用了贪磺，雖然也是按需引入硫兰，但是ant-design本身確實(shí)存在些問題。
某些組件寒锚，比如manu在 IE下會(huì)報(bào)錯(cuò)
[Vue warn]: Error in render: “ReferenceError: “Symbol”未定義”劫映；
這是由于antd本身寫法是基于ES的Symbol，但是我們打包編譯沒有把這些高級(jí)語(yǔ)法轉(zhuǎn)換成瀏覽器支持的語(yǔ)法刹前，谷歌火狐都支持了該語(yǔ)法但是IE 并沒有泳赋，所有我們需要使用Babel去轉(zhuǎn)換。
添加polypill
看我們的小伙伴是直接在main.js里直接引入了core-js/stable 和 regenerator-runtime/runtime喇喉， 也沒注釋祖今，不夠優(yōu)雅，趁現(xiàn)在有點(diǎn)時(shí)間轧飞，想改改衅鹿。
import 'core-js/stable';
import 'regenerator-runtime/runtime';
因?yàn)槲覀兪褂玫氖莢ue的官方腳手架vue-cli，因此去查看官方文檔过咬，看到瀏覽器兼容性這一塊大渤，有可配置的項(xiàng)，
https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist
里面講得很清楚掸绞，我們可以選擇配置browserslist泵三， transpileDependencies耕捞，polyfills等 有三種方式，根據(jù)自身需要去配置：
如果你想直接轉(zhuǎn)換某些第三方?jīng)]有轉(zhuǎn)換的依賴烫幕，比如我們明確得知道了and的包語(yǔ)法需要轉(zhuǎn)譯俺抽，因此我們可以直接添加配置：
transpileDependencies
- Type:
Array<string | RegExp>
- Default:
[]默認(rèn)情況下 `babel-loader` 會(huì)忽略所有 `node_modules` 中的文件。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個(gè)依賴较曼，可以在這個(gè)選項(xiàng)中列出來磷斧。
module.exports = {
// babel polyfill 適配IE11
transpileDependencies: [
'@ant-design',
'ant-design-vue'
],
//******
}
這樣我們?cè)贗E下就不會(huì)報(bào)錯(cuò)了，已經(jīng)進(jìn)行了polyfill捷犹。
ant-design 的 icons/lib 包全量引入了弛饭，還沒處理成功
按照antd官網(wǎng)的issue討論的結(jié)果去嘗試了下，沒成功???♂?
https://github.com/ant-design/ant-design/issues/12011
https://github.com/ant-design/ant-design/issues/26371
https://stackoverflow.com/questions/48721290/ant-design-huge-imports
按照各位網(wǎng)友提供的新建了個(gè)icons.js export { ****}
然后配置了別名指向萍歉，一直報(bào)沒有該模塊侣颂，奇怪，不過我使用的ant-design-vue枪孩，沒有使用ant-design, 只是也會(huì)去引用@ant-design/icons憔晒；
module.exports = {
//...
resolve: {
alias: {
"@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
}
}
};
感覺是ant-design-vue的問題，它的官網(wǎng)也寫了蔑舞，
更多討論可參考：#10353拒担。
?? 1.2.0 之后我們?nèi)恳肓怂袌D標(biāo)，導(dǎo)致 ant-design-vue 默認(rèn)的包體積有一定增加攻询，我們會(huì)在不遠(yuǎn)的未來增加新的 API 來實(shí)現(xiàn)圖標(biāo)的按需使用澎蛛，更多相關(guān)討論可關(guān)注：#12011。在此之前蜕窿，你可以通過來自社區(qū)同學(xué)的 webpack 插件將圖標(biāo)文件拆分。
然后試了下 這個(gè)推薦的插件呆馁，原理也只是拆分包而已桐经，并沒有減小體積；但也沒成功浙滤，竟然報(bào)react的antd包不存在???♂?阴挣，請(qǐng)求暫停～
現(xiàn)在還有另外兩條路纺腊，降低版本畔咧，或者等待升級(jí)版本∫灸ぃ坑 體積大了好幾百K誓沸，gzip也多了147k。
拆分包壹粟，減小首頁(yè)加載體積
一般的拜隧，我們開發(fā)的時(shí)候就已經(jīng)根據(jù)不同的模塊拆分不同的包，路由懶加載等，vue-cli提供了便捷的方式洪添，只需我們?cè)谂渲寐酚傻臅r(shí)候動(dòng)態(tài)引入：
路由懶加載
{
path: '/模塊a/home',
name: 'home',
component: () => import(/* webpackChunkName: "模塊a" */ '@/views/Home.vue') //可以指定打包的模塊名垦页，將相同的模塊的路由打包到同一個(gè)chunk
},
減少全局引入
減少全局引入的CSS，js干奢，以及某些首頁(yè)沒有使用的組件庫(kù)痊焊；
這需要我們編寫的時(shí)候要拆分好各個(gè)模塊，c s s也是按照不同的功能忿峻，不同的模塊去拆分薄啥，需要覆蓋樣式的話，也可以在頁(yè)面里面去import炭菌；js也一樣罪佳，還有某些模塊，比如我寫的首頁(yè)其實(shí)是沒有依賴大型框架的黑低，沒有ant-design-vue赘艳，但是我們寫其他模塊的小伙伴引用了（歷史原因，我們本來是說要獨(dú)立幾個(gè)小項(xiàng)目克握，后面需要合一起蕾管，然后那段時(shí)間我請(qǐng)假了，別人合的菩暗，此處甩了個(gè)鍋）掰曾，而且是在main.js入口文件直接全局引入，雖然是按需引入停团，但也是增加了第一次加載的chunk體積旷坦；
import { Button,
Menu,
Select,
//****
} from 'ant-design-vue';//TODO： 組件引用時(shí)引入，減小首頁(yè)加載大小
Vue.use(Button);
Vue.use(Menu);
Vue.use(Select);
我們需要在使用的頁(yè)面或組件里面去引入
某頁(yè)面的.vue
import { Button } from 'ant-design-vue'
export default {
name:'aptReport',
components:{
Button
}
///*******
}
總的來說佑稠，如非必要秒梅，盡量避免在入口文件全局引入。
這樣的話舌胶，總體體積可能會(huì)增加捆蜀，但是首頁(yè)的會(huì)減小，首頁(yè)的響應(yīng)時(shí)間也會(huì)更快幔嫂。
