• 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会压缩到很小,大大的提升了加载的速率,写的不足欢迎大佬吐槽!!!

  • 相关阅读:
    apche启动错误|httpd.pid overwritten — Unclean shutdown of previous Apache run?
    查看Mysql版本号 (最简单的是status )
    在不损坏C盘的情况下为C盘扩容,适用于Win
    Python环境配置安装
    用Python建立最简单的web服务器
    MongoDB
    MongoDB
    MongoDB
    MongoDB
    MongoDB
  • 原文地址:https://www.cnblogs.com/0314dxj/p/11308761.html
Copyright © 2020-2023  润新知