原文链接： https://wuweijun.cn/2020/11/vue-cli-moment-ie11-ant-design/#more
减小moment.js的体积
一般如果项目引入了moment.js或者引入的某个第三方插件包使用了moment.js， 通常情况下，会全部引入了所有语言包，体积过大，我们需按需引入，只打包我们需要的语言包，默认引入英文。
image-20201124101802966
在vue.config.js中添加配置，
const webpack = require('webpack');
module.exports = {
// ******
configureWebpack: {
// externals:['moment'], //项目中引用了moment 不能使用
plugins:[
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn/) //减小moment语言包体积
],
//省略其他配置*******
}
//省略其他配置*******
}
配置后，只保留了中文
image-20201125140757092
当然更好的方案是使用现在新的库替代moment，如果情况允许的话，比如：day.js、date-fns；因为有些老的插件，库会依赖moment，因此我们做选择的时候就应该考虑到这点。
适配IE11 antd IE11下有问题
我们项目是由我带着分研发小伙伴加外包一起弄的，我的首页比较简单没有引入大型框架，然而我们其他页面引用了，虽然也是按需引入，但是ant-design本身确实存在些问题。
某些组件，比如manu在 IE下会报错
[Vue warn]: Error in render: “ReferenceError: “Symbol”未定义”；
这是由于antd本身写法是基于ES的Symbol，但是我们打包编译没有把这些高级语法转换成浏览器支持的语法，谷歌火狐都支持了该语法但是IE 并没有，所有我们需要使用Babel去转换。
image-20201125145252474
添加polypill
看我们的小伙伴是直接在main.js里直接引入了core-js/stable 和 regenerator-runtime/runtime， 也没注释，不够优雅，趁现在有点时间，想改改。
import 'core-js/stable';
import 'regenerator-runtime/runtime';
因为我们使用的是vue的官方脚手架vue-cli，因此去查看官方文档，看到浏览器兼容性这一块，有可配置的项，
https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist
里面讲得很清楚，我们可以选择配置browserslist， transpileDependencies，polyfills等 有三种方式，根据自身需要去配置：
如果你想直接转换某些第三方没有转换的依赖，比如我们明确得知道了and的包语法需要转译，因此我们可以直接添加配置：
transpileDependencies
- Type:
Array<string | RegExp>
- Default:
[]默认情况下 `babel-loader` 会忽略所有 `node_modules` 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
module.exports = {
// babel polyfill 适配IE11
transpileDependencies: [
'@ant-design',
'ant-design-vue'
],
//******
}
这样我们在IE下就不会报错了，已经进行了polyfill。
ant-design 的 icons/lib 包全量引入了，还没处理成功
按照antd官网的issue讨论的结果去尝试了下，没成功🤦♂️
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
按照各位网友提供的新建了个icons.js export { ****}
然后配置了别名指向，一直报没有该模块，奇怪，不过我使用的ant-design-vue，没有使用ant-design, 只是也会去引用@ant-design/icons；
module.exports = {
//...
resolve: {
alias: {
"@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
}
}
};
感觉是ant-design-vue的问题，它的官网也写了，
更多讨论可参考：#10353。
⚠️ 1.2.0 之后我们全量引入了所有图标，导致 ant-design-vue 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：#12011。在此之前，你可以通过来自社区同学的 webpack 插件将图标文件拆分。
然后试了下 这个推荐的插件，原理也只是拆分包而已，并没有减小体积；但也没成功，竟然报react的antd包不存在🤦♂️，请求暂停～
现在还有另外两条路，降低版本，或者等待升级版本。坑 体积大了好几百K，gzip也多了147k。
image-20201125171758286
拆分包，减小首页加载体积
一般的，我们开发的时候就已经根据不同的模块拆分不同的包，路由懒加载等，vue-cli提供了便捷的方式，只需我们在配置路由的时候动态引入：
路由懒加载
{
path: '/模块a/home',
name: 'home',
component: () => import(/* webpackChunkName: "模块a" */ '@/views/Home.vue') //可以指定打包的模块名，将相同的模块的路由打包到同一个chunk
},
减少全局引入
减少全局引入的CSS，js，以及某些首页没有使用的组件库；
这需要我们编写的时候要拆分好各个模块，c s s也是按照不同的功能，不同的模块去拆分，需要覆盖样式的话，也可以在页面里面去import；js也一样，还有某些模块，比如我写的首页其实是没有依赖大型框架的，没有ant-design-vue，但是我们写其他模块的小伙伴引用了（历史原因，我们本来是说要独立几个小项目，后面需要合一起，然后那段时间我请假了，别人合的，此处甩了个锅），而且是在main.js入口文件直接全局引入，虽然是按需引入，但也是增加了第一次加载的chunk体积；
import { Button,
Menu,
Select,
//****
} from 'ant-design-vue';//TODO： 组件引用时引入，减小首页加载大小
Vue.use(Button);
Vue.use(Menu);
Vue.use(Select);
我们需要在使用的页面或组件里面去引入
某页面的.vue
import { Button } from 'ant-design-vue'
export default {
name:'aptReport',
components:{
Button
}
///*******
}
总的来说，如非必要，尽量避免在入口文件全局引入。
这样的话，总体体积可能会增加，但是首页的会减小，首页的响应时间也会更快。
网友评论