Vue-cli 打包的vendor很大

问题：

Vue-cli 打包后vendor很大，700多KB，导致首次加载页面速度很慢

原因：

vendor中将引用三方插件打包了，如Element-UI 等

解决办法：

禁止打包第三方插件，通过CDN引用(本文均以elementUI为例)

1.在webpack.base.conf.js中加上externals

表示webpack不需打包的文件 ，

格式为：‘插件名’: '项目中别名'

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  //不打包的项目，解决vendor打包后太大
  externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
  },
  output: {...},
  resolve: {...},

2.将main.js中引入的第三方插件注释或去除

//import ElementUI from 'element-ui';
//import 'element-ui/lib/theme-chalk/index.css';

//Vue.use(ElementUI)

3.在index.html中使用CDN方式引入相应js

    <!-- element-UI样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">

    <!-- vendor打包过大的解决办法 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>

---

结果：

打包element时

不打包element之后

---

 

由于axios封装了element的Message，改为CDN引入后报错

调用的地方修改：

ELEMENT.Message({
    showClose: true,
    message: response.data.msg,
    type: "error"
});