善用js 异步引入,大幅提升vue站点加载速度,媲美大厂流畅性

相信很多同学都会遇见这样一个问题,vue,开发的网页一直转圈,Vue不好吗,不是,一个小知识点让你的Vue网页如丝滑般流畅。

我在学vue的第一节课,也就是入门课时,就被老师教导分模块,分组件,接下来看下模块与组件如何优化吧

首先从全局来看,多个网页的路由文件使用路由懒加载,这样:

{
      path: ‘index‘,
      name: ‘index‘,
      meta: {
        title: ‘首页信息‘,
      },
      component: () => import(‘@/views/home‘),   //()=> 后面不加大括号,Es6直接返回后面的内容,这就是路由懒加载
    }

  从构成一个网站的页面中的单个页面来看,可以这样

const home=()=>import(‘@/components/home‘);  //vue组件懒加载,不要小看哦,加载时采用这种方式引入,可以大幅提升页面加载速度哦

export default{  components:{  home}}

 各位同学要善用组件,善于拆分并异步引入,相信你们的网站也会超级流畅 

原文地址:https://www.cnblogs.com/uimeigui/p/12655391.html

时间: 2024-10-12 08:29:46

善用js 异步引入,大幅提升vue站点加载速度,媲美大厂流畅性的相关文章

Javascript加载速度慢解决办法

通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢.解决办法:换一个js包含的方式,让javascript加载速度倍增.把通常加载方式:  代码如下 复制代码 <script src="xxxx.js"></script> 改变成:  代码如下 复制代码 <script type="text/javascript"> document.write(

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

vue中加载three.js的gltf模型

vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二.three.js中所有的控件插件,都可以在node_modules下面的three里面找到 三.安装好以后,在页面中引入three.js并使用:在所调用页面引入的代码为 import * as THREE from "three"; import { GLTFLoader } from &

js引入php 用来加载静态页面 输出到页面中

HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd"></script> js.php代码: <?php //js加载静态页面 输出到页面中 $id = trim($_GET['id']); $file = 'iframe/'.$id.'.html'; if(file_exists($file)){ //echo '22'; $

基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的: 2. 静态文件本地缓存有两种方式 HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,很多文章讲的比较详细,推荐:https://www.cnblogs.com/chinajava/p/5

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打包时生成的map文件 在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件 2,vue-router路由懒加载 懒加载的实现方式有很多种,这里简单说三种实现方法 vue异步组件 import() webpack的require.e

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: <script src="xxxx.js"></script> 改变成: 代码如下: <script type="text/javascript"> document.write("<scr

解决JS加载速度慢

在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <<script type="text/javascript">>document.write("<<scr"+"ipt src=\"xxxx.js\" language=\"JavaScript\&quo