关于webpack打包vue后vendor包过大的问题

因为项目用到了elementUI,打包之后包括vue、axios、elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示。在百度过后发现可以使用外链接而不用模块包。

博主使用的外链接包含vue、axios、elementUI。

第一步是找到对应的版本,在package-lock.json找到固定的版本号

第二步是在 https://www.bootcdn.cn/  找到对应的版本链接

比如axios的对应 https://www.bootcdn.cn/axios/  网址。

第三步写在index.html里面,script标签vue的引入一定要在其他之前,例如elementui需要引入vue,如果在引入elementui之后就会报错,因为没有找到vue

第四步在webpack.base.conf.js与entry相同的级别

 externals: {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT'
}

第五步在main.js包括各个地方引用Vue/axios中 import Vue from 'vue'; import axios from 'axios';注释掉

第六步打包完成

然后原本从500kb的包就变成了400b左右

以上如果有错误的地方欢迎指出。谢谢

上一篇:webpack打包vue单文件组件


下一篇:webpack打包.vue文件