laravel+vue项目优化加载

前言

最近做一个项目是php的laravel+vue的项目，刚开始还好，用的东西还不多也挺顺利的，遇到的问题也都解决了，随着项目功能的增多，项目的首页加载速度也越来越慢，打开控制台，app.js文件竟然加载了6、7s，这是一个非常不好的体验，下面就记录一下我的优化方法。

一.查看加载

　　一般项目结构都是这样的：

  　　 

 　　1.安装插件webpack-bundle-analyzer $ npm install webpack-bundle-analyzer -D

　　2.打开webpack.mix.js文件 添加代码          

     　　

     　　

　　3.重新运行项目，会弹出网页，可以看到你文件的大小，并进行优化。

二优化文件

　　　1.查看app.js有很多不需打包的js

        　　

　　　2.将这些代码注释，打开webpack.mix.js文件，在extrnals中配置，

       　　  

　　3.在resources/views文件找到index.dlade.php文件，里面是html的代码，打开文件引入响应的js文件，并重新运行代码

　　4.在resources/views文件找到index.dlade.php文件，里面是引入别的文件（本项目不是我从头到尾的开发），项目写的比较乱，我也整理了一下，摸出cdn引入的位置，最后将代码引入：

      　　

　　5.重新运行代码，你就可以看出app.js文件已经缩小了很多了，首页也加载的快了很多。

三.路由的懒加载

　　1.路由的懒加载也可以优化代码，是页面运行流畅。

　　2.安装插件： $ npm install --save-dev babel-plugin-syntax-dynamic-import

　　3.在项目中新建.babelrc文件，添加代码：

   　　 

　　4.然后把路由改成这样的：

       　

　　这样操作过后，app.js会压缩到很小，大大的提升了加载的速率，写的不足欢迎大佬吐槽！！！