关于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相同的级别

1 externals: {
2     'vue': 'Vue',
3     'axios': 'axios',
4     'element-ui': 'ELEMENT'
5 }

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

第六步打包完成

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

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

转载于:https://www.cnblogs.com/zbk123/p/9561004.html