zoukankan      html  css  js  c++  java
  • vue-cli3项目优化首页加载过慢的一些心得

    博主最近发现vue-cli3项目做完后,点击首页加载时间好久啊,一般都要3-5s。这样的加载时间博主自己都受不了,所以就有了这个随笔,将自己的一些研究心得分享给大家。

    • 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer,这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大,我可以对echarts、momentjs采用cdn方式引入
    • 在vue-cli3中采用cdn方式引入
      1. 推荐给大家我所用的cdn网址--bootcn,当然,大家也可以选用其他的cdn网址如(cdnjs,unpkg)。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
      2. cdn的引入和普通的script引入方式一致。如下图
      3. 除了在index.html中引入,还需要将对应的引入写入到vue的配置问件中
      4. 在页面调用中用 import 导入即可。列如(import echarts from "echarts")
    • 除了将第三方文件用cdn方式引入,我们项目中的大图片也需要做一下无损压缩
    • 路由采用懒加载(按需引入方式)


      component: () => import( /* webpackChunkName: "about" */ './views/login.vue')
      

        

    • 最后是服务器配置gzip(gzip
  • 相关阅读:
    jdbc之存储过程的调用和调用方法
    jdbc之Statement和Preparement
    jdbc之连接Oracle的基本步骤
    Oracle之子程序(存储过程、方法、包)
    Oracle之plsql及游标
    Oracle之多表查询
    Oracle之单表查询及常用函数
    Oracle之基础操作
    IO流之字符流
    IO流之字节流
  • 原文地址:https://www.cnblogs.com/XCWebLTE/p/10141997.html
Copyright © 2011-2022 走看看