vue打包后vendor.js文件过大解决方案

12,499 阅读1分钟

vue项目打包过后会生成.map文件,而且.map文件也挺大的,map文件的作用是报错时会帮你映射到错误位置,是在代码的哪一行,一般情况下该文件是没有用的,所以打包的时候可以不生成.map文件,需要在config/index.js文件中:

将productionSourceMap的属性设置为false即可。


第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:


第二步、在使用vue等包的地方,注释掉import引入

在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中

在main.js


在store文件加中的index.js


在api/request.js文件中


在router/index.js文件中


第三步、打包忽视掉vue等包

在webpack.base.conf.js



第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由


最终打包结果

vendor.js的大小由原来的988k, 降到235k