Externals ElementUI
一、解决方案简述
在构建基于Vue的项目时，使用ElementUI是一个非常流行的选择。为了优化打包体积和加载性能，可以将ElementUI设置为externals。这样做的好处是，不会将ElementUI的代码打包进项目的最终文件中，而是通过CDN等外部方式引入，从而减小了项目的打包体积，提升了页面加载速度。
二、实现思路与代码示例
1. 使用webpack配置externals属性（适用于vue - cli3以下版本）
如果项目不是vue - cli3及以上版本创建的，可以在webpack配置文件中进行如下操作：
javascript
// webpack.config.js
module.exports = {
// 其他配置项...
externals: {
'element - ui': 'ElementUI'
}
};
然后在index.html中通过cdn引入ElementUI：
html
</p>
<title>Document</title>
<!-- 引入样式 -->
<div id="app"></div>
<!-- 引入组件库 -->
<p>在main.js中就可以直接使用ElementUI而无需再安装npm包：
javascript
import Vue from 'vue';
import App from './App.vue';</p>
<p>Vue.use(ElementUI);</p>
<p>new Vue({
render: h => h(App),
}).$mount('#app');
2. vue - cli3及以上版本配置
对于vue - cli3及以上版本创建的项目，可以在vue.config.js中进行配置：
javascript
module.exports = {
configureWebpack: {
externals: {
'element - ui': 'ElementUI'
}
}
};
其他步骤与上面相同，都是通过cdn引入css和js文件，然后在代码中正常使用ElementUI组件。
另外一种思路是只按需引入部分组件并设置externals，这样既可以减少不必要的打包体积，又能享受externals带来的好处。例如我们只需要使用Button组件：
javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import { Button } from 'element - ui'; // 假设这里没有设置externals，先正常引入
Vue.component(Button.name, Button);</p>
<p>Vue.use(ElementUI); // 如果设置了externals，这里会报错，因为此时ElementUI并没有真正引入，需要按照上述cdn方式引入</p>
<p>new Vue({
render: h => h(App),
}).$mount('#app');
同时要确保cdn引入的是完整的ElementUI库或者包含所需组件的精简版库。
