laravel+vue项目优化加载

迷南。 2023-10-10 08:23 20阅读 0赞

## 前言 ##

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

## 一.查看加载 ##

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

![1][]

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

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

![1 1][]

![1 2][]

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

## 二优化文件 ##

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

![1 3][]

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

![1 4][]

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

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

![1 5][]

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

## 三.路由的懒加载 ##

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

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

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

![1 6][]

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

![1 7][]

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

转载于:https://www.cnblogs.com/0314dxj/p/11308761.html

[1]: https://user-gold-cdn.xitu.io/2019/8/6/16c64f56d50ea04d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2019/8/6/16c64fc7ba559917?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2019/8/6/16c64fd213f60bbd?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2019/8/6/16c6512e3c0d1a1d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 4]: https://user-gold-cdn.xitu.io/2019/8/6/16c6515edd450ec4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2019/8/6/16c6591f5b13ad55?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 6]: https://user-gold-cdn.xitu.io/2019/8/6/16c659c0ad30fa93?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 7]: https://user-gold-cdn.xitu.io/2019/8/6/16c659db97fd520c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1