【修复日常bug】处理vue打包导致vendor.js文件过大

我看网上的教程写的都不是很清楚，所以这里写详细一些。

 

通常我们在npm run build打包项目部署到服务器上运行，会看到Network调试下有个vendor.js文件加载耗时很慢，这就导致了整个网站首次加载非常缓慢：

 

如果项目导入的第三方库过多（第三方库占用实际内存空间太大），打包以后的项目大小+第三方库都会合成vendor.js文件中，这也就是导致vendor.js加载缓慢的原因。

处理这种问题我们就不能使用import的方式去引入第三方库，改成CDN引入的方式，配置方法：

 

1、这里我们把import导入的方式删掉

我们看到Vue.use还在调用Vue对象，会报错Vue is not defined，这里我们不用担心，下面我们进行第二步配置

 

2、通过cdn方式去引入import需要导入的库（我们不是不用import，而是换了另一种方式去引入，这样可以减轻vendor.js的负担）

 

3、这一步配置非常重要，我们在目录build/webpack.base.conf.js文件中配置externals

externals的作用是从打包的bundle文件中排除依赖。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script（CDN）的方式去访问这些依赖。

 

如果vendor.js文件很小，页面还是加载很慢的话，我们看看路由是否是使用import方式去引入页面，

improt的方式是非懒加载的路由配置：

 

我们可以用页面懒加载的方式去处理，采用路由懒加载提升加载速度：