有时候我们将vue项目打包后运行后，访问首页时发现：需要等待十几秒甚至几十秒的时间才能看到页面，通过F12发现，vendor.js高达几MB，加载时间很长，这给我们造成了极大的困扰，用户体验太差了吧！

下面我就来为大家介绍一下，有效的解决方法：

下面我就以vue、vuex、vue-router、axios、element-ui、 echarts为例，为大家详细示范如何通过CDN引入这些包

（这里推荐大家两个常用的、比较稳定的CDN网站：https://www.bootcdn.cn、https://www.jsdelivr.com）

index.html 附上link代码:

附上script 代码:

这里有个坑,需要注意一下: 除了Vue.use(Element)需要注释以外（ 如果加上这句话，还是会打包element-ui到vendor.js文件中），Vue.prototype.axios = axios、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用。

main.js router/index.js

这里要注意一下，Vue.use(VueRouter)中的VueRouter不能改为其他字段,否则会报错 这里我本来引入的时候命名为Router,注释掉后就将Vue.use(Router)改为了Vue.use(VueRouter)

store/index.js utils/httpRequest.js

按上图所示方法,注释掉其他import引入的地方即可

webpack.base.conf.js

externals对象中输入的属性,表示这些包是通过外部引入的,不需要将它们打包到vendor.js

附上代码:

至此我们就完成了CDN引入包的方式，现在赶紧打包一下看看效果吧

我们一般会在构建时压缩 webpack的compression-webpack-plugin插件用于支持构建项目时压缩文件，具体配置如下：

npm install --save-dev compression-webpack-plugin

config/index.js （webpack相关）

webpack.prod.conf.js 附上代码: (这里其实会自动生成)

打包后会同时保留原文件和压缩后的文件，接下的事情就交给后端了，让他们服务端nginx启动gzip_static

更加详细的关于webpack配置Gzip的教程可以参考这篇文章https://www.cnblogs.com/zs-note/p/9556390.html

以上就是我为大家整理的可以有效解决由打包后的vendor.js文件过大问题引起的vue首屏加载慢的方法，如果有什么不足或者错误的地方，还请指教，及时修改，谢谢大家。