拿element-ui和vue-ant-design为例吧;
安装element-ui后打包出来的体积为800多kB,即使使用了官方的按需加载,打包下来的体积也有700kB
安装ant-design-vue后打包出来的体积为1800多kB,使用了官方的按需加载,会报错“ Antd is not defined”错误,
src\plugins\ant-design-vue.js将import Antd from 'ant-design-vue'改成import Antd from 'ant-design-vue/es',也能解决报错,但打包下来的文件还很大,
下面我们同时使用cdn的方式同时引入element-ui以及ant-design-vue看看打包结果
注意:
1.因为Element和ant依赖Vue,vue.js需要在element-ui和ant之前引入,所以vue.js也要改为cnd的引入方式
否则会报错哦
2.moment.js一定要放在element-ui和ant-design-vue前面,否则会导致DatePicker报错
index.html引入
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
<!---element-ui-->
<link href="https://cdn.bootcss.com/element-ui/2.9.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
<!---ant-design-vue-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.6.4/antd.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/1.6.4/antd.min.js"></script>
</head>
vue.config.js
module.exports = {
configureWebpack: {
externals: {
'vue': 'Vue',
// 'element-ui': 'ELEMENT',
// 'ant-design-vue':'antd',
'moment': 'moment'
}
},
}
APP.Vue 使用
<template>
<div id="app">
<el-button>el-button</el-button>
<a-button type="primary">Primary</a-button>
<a-pagination size="small" :total="50" showSizeChanger showQuickJumper />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "./components/HelloWorld.vue";
// @ts-ignore: Unreachable code error
import moment from 'moment';
@Component({
components: {
HelloWorld
}
})
export default class App extends Vue {
created() {
console.log(moment().format('YYYY-MM-DD'))
}
}
</script>
然后运行项目 npm run serve 就可以看到
最后运行npm run build发现打包结果
本地预览一下: