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

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

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

image.png

第一步、cdn 引入各种包

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

image.png

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

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

在 main.js

image.png

在 store 文件加中的 index.js

image.png

在 api/request.js 文件中

image.png

在 router/index.js 文件中

image.png

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

在 webpack.base.conf.js

image.png

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

image.png

最终打包结果

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

image.png

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