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

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

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

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

vue 打包后 vendor.js 文件过大解决方案_第1张图片
image.png

第一步、cdn 引入各种包

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

vue 打包后 vendor.js 文件过大解决方案_第2张图片
image.png

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

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

在 main.js

vue 打包后 vendor.js 文件过大解决方案_第3张图片
image.png

在 store 文件加中的 index.js

vue 打包后 vendor.js 文件过大解决方案_第4张图片
image.png

在 api/request.js 文件中

vue 打包后 vendor.js 文件过大解决方案_第5张图片
image.png

在 router/index.js 文件中

vue 打包后 vendor.js 文件过大解决方案_第6张图片
image.png

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

在 webpack.base.conf.js

vue 打包后 vendor.js 文件过大解决方案_第7张图片
image.png

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

vue 打包后 vendor.js 文件过大解决方案_第8张图片
image.png

最终打包结果

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

vue 打包后 vendor.js 文件过大解决方案_第9张图片
image.png

原文地址: https://juejin.im/post/5d1c39b65188257cbb476f44

你可能感兴趣的:(vue 打包后 vendor.js 文件过大解决方案)