Angular性能优化之第三方组件和懒加载技术

概述

应该有很多人都抱怨过 Angular 应用的性能问题。其实，在搭建Angular项目时，通过使用打包、懒加载、变化检测策略和缓存技术，再辅助第三方组件，便可有效提升项目性能。

为了帮助开发者深入理解和使用Angular，本文将以在线表格编辑为例，演示如何借助懒加载技术，在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能。

环境准备

1.全局安装Angular CLI：npm install -g @angular/cli

2.使用Angular CLI创建一个新项目：ng new spread-sheets-angular-cli

3.下载SpreadJS Npm包：npm install @grapecity/spread-sheets;npm install @grapecity/spread-sheets-angular

4.在angular.json中配置SpreadJS CS

5.在Angular应用程序中使用 SpreadJS

6.使用Angular CLI构建和运行项目

完成上述环境搭建，便可将表格编辑器组件集成到 Angular 项目中，实现在线导入导出Excel以及数据在线填报等功能。

在开始优化之前，我们先来分析一下是什么因素影响了项目的性能。

影响项目性能的因素

在集成 SpreadJS 表格组件后，项目的公式数据处理速度符合预期，页面在运行也较为流畅。但是发布后，用户打开页面在加载时间上要比开发环境有所延长，带来的用户体验较差。经过调研，发现在Angular的默认中，NgModule都是急性加载的，也就是会在应用加载时尽快加载。无论是否要立即使用，所有模块都会一并加载。

因此，对于多路由的大型应用，建议采用懒加载——按需加载的NgModule的模式。通过懒加载可以减少初始包的尺寸，从而减少加载时间。

什么是懒加载？

在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。懒加载会在首次加载时，将必须的模块加载，而其余暂时用不到的模块则不会加载。例如在商城系统中，用户打开首页时，只需展示商品，此时用不上支付模块，所以支付模块就可以使用懒加载技术。

项目优化

1. 划分业务模块

要懒加载Angular模块，需要在AppRoutingModule routes中使用loadchildren替代component进行配置。

在懒加载模块的路由模块中，添加一个指向该组件的路由。本次的demo存在两个懒加载的模块。

2. 建立导航UI

虽然可以直接在地址栏直接输入URL，但是有导航UI会更好用。三个a标签分别代表主页以及两个需要懒加载的模块。

3. 导入与路由配置

CLI会将每个特性模块自动添加到应用级的路由映射表中，最后通过添加默认路由来最终完成。

4. 特性模块内部

我们到lazy-webexcel.module.ts文件看下，导入了lazy-webexcel-routing.module.ts和lazy-webexcel.component.ts文件。@NgModule的imports数组列出了LazyWebExcelRoutingModule，让LazyWebExcelModule可以访问他自己的路由模块。另外，LazyWebExcelComponent属于LazyWebExcelModule。

设置path为空，因为AppRoutingModule 中的路径已经设置了，LazyWebExcelRoutingModule中的此路由已经位于lazywebexcel这个上下文中。另一个模块配置也类似，因此不再赘述。

5. 确认它正常工作

我们可以通过Chrome的开发者工具的网络页标签来确认这些模块是否懒加载。点击Designer Component LazyLoad，可以看到下图的文件出现，表示准备就绪，特性模块被惰性加载成功。

总结

经过优化，首屏加载时间能得到有效的降低。另外，再说一下forRoot和forChild。CLI会把RouterModule.forRoot(routes)添加到AppRoutingModule的imports 数组中。这会让Angular知道AppRoutingModule是一个路由模块，而 forRoot() 表示这是根路由模块。它会配置传入的所有路由、让你能访问路由器指令并注册 Router。

CLI 还会把 RouterModule.forChild(routes) 添加到各个特性模块中。这种方式下 Angular 就会知道这个路由列表只负责提供额外的路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用 forChild()。

以上就是 SpreadJS结合Angular框架，并借助懒加载技术优化在线Excel项目的主要过程。除了懒加载，Angular还提供了很多性能优化方式，如浏览器缓存策略、RxJS、Tree Shaking、使用AoT编译等，用好这些技术能让你的项目性能有所提升，为用户提供更良好的使用体验。

以上就是Angular性能优化之第三方组件和懒加载技术的详细内容，更多关于Angular性能优化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • angularjs性能优化的方法

    学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题.所以自己也总结了下常用的性能优化. 优化$watch 1.及时移除不必要的watch var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } }); 2.尽量避免深度watch 我们都知道$watch有三个参数,第三个参数为t

  • 浅谈Angular2 模块懒加载的方法

    浅谈Angular2 模块懒加载的方法

    当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了.所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验. 下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/ 先看项目文件结构: home模块放到src/app/home目录下,里面的home目录是home组件. home模块有单独的定义和路由(home.module.ts,home-ro

  • 整理AngularJS框架使用过程当中的一些性能优化要点

    整理AngularJS框架使用过程当中的一些性能优化要点

    1. 简介 无论你正在编写一个旧的应用程序还是在一个大型应用中采用AngularJS,性能是一个重要的方面.了解是什么原因导致AngularJS应用程序慢下来非常重要,要知道,在开发过程中做出权衡是很重要的.本文将介绍一些AngularJS比较常见的性能问题,以及优化的建议. 2. 性能测试工具 本文采用jsPerf http://jsperf.com/ 性能测试的基准. 3. 软件性能 评价软件性能有两个基本的因素: 首先是算法的时间复杂度.一个简单的例子就是线性搜索和二分检索有着非常显著的性

  • AngularJS进行性能调优的7个建议

    AnglarJS作为一款优秀的Web框架,可大大简化前端开发的负担.近日Sebastian Fröstl在一篇博文<AngularJS Performance Tuning for Long Lists>中表示AnglarJS在处理包含复杂数据结构的大型列表时,其运行速度会非常慢.他在文中同时分享了解决方案.下面为该文的译文. AnglarJS很棒,但当处理包含复杂数据结构的大型列表时,其运行速度就会非常慢.这是我们将核心管理页面迁移到AngularJS过程中遇到的问题.这些页面在显示500行

  • angular实现图片懒加载实例代码

    这两天一直纠结angular的图片懒加载插件中无法自拔.在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上.这里主要谈谈在使用插件的过程遇到的一些问题. 一)我使用的是angular-imglazyload这个插件.[https://www.npmjs.com/package/angular-imglazyload]主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映.下面是我的

  • 基于angular6.0实现的一个组件懒加载功能示例

    我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,

  • Angular利用trackBy提升性能的方法

    Angular利用trackBy提升性能的方法

    在Angular的模板中遍历一个集合(collection)的时候你会这样写: <ul> <li *ngFor="let item of collection">{{item.id}}</li> </ul> 有时你会需要改变这个集合,比如从后端接口返回了新的数据.那么问题来了,Angular不知道怎么跟踪这个集合里面的项,不知道哪些该添加哪些该修改哪些该删除.结果就是,Angular会把该集合里的项全部移除然后重新添加.就像这样: 这样做

  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. angular懒加载机制刷新后无法回退的解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个on

  • 再谈Angular4 脏值检测(性能优化)

    Summary Angular 4的脏值检测是个老话题了,而理解这个模型是做Angular性能优化的基础.因此,今天我们再来聊聊Angular 4脏值检测的原理,并看看性能优化的小提示. 进入点 - Zone.js Angular 4是一个MVVM框架.数据模型(Model)转换成视图模型(ViewModel)后,绑定到视图(View)上渲染成肉眼可见的页面.因此,发现数据模型变化的时间点是更新页面的关键,也是调用脏值检测的关键. 经过分析,工程师们发现,数据的变化往往由macrotask和mi

  • Angular性能优化之第三方组件和懒加载技术

    Angular性能优化之第三方组件和懒加载技术

    概述 应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 1.全局安装Angular CLI:npm install -g @angular/cli 2.使用Angular CLI创建一个新

  • 解析vue路由异步组件和懒加载案例

    最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

  • vue2组件实现懒加载浅析

    vue2组件实现懒加载浅析

    一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 三.如何与webpack配合实现组件懒加载 1.在webpack配置文件中的output路径配置chunkFilename属性 output: { pat

  • Python爬虫图片懒加载技术 selenium和PhantomJS解析

    一.什么是图片懒加载? - 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import requests from lxml import etree if __name__ == "__main__": url = 'http://sc.chinaz.com/tupian/gudianmeinvtupian.html' headers = { 'User-Agen

  • JS图片懒加载技术实现过程解析

    懒加载技术 懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小. 原理:页面加载后只让文档可视区内的图片显示,其它不显示,随着用户对页面的滚动,判断其区域位置,生成img标签,让到可视区的图片加载出来. 所用相关技术:给img加属性 (例如data-src),将图片的地址赋值给他,这样就生成img标签后再把data-src的值赋给img的src(通过dataset.src或者getAttrib

  • webpack学习笔记之优化缓存、合并、懒加载

    webpack学习笔记之优化缓存、合并、懒加载

    除了的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度.下面是生产环境配置文件webpack.production.js,与wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校验等,将与开发相关的东西删掉.下面的介绍均以此代码配置作参考. /*生成环境配置文件:不需要一些dev-tools,dev-server和jshint校验等.和开发有关的东西删掉*/ var webpack = require('webpack

  • Android优化方案之Fragment的懒加载实现代码

    一.背景 在Android应用中,ViewPager是我们不可避免使用的一个控件,因为它可以使我们在占用较少空间的同时,增强内容的丰富性,同时以其内部流淌着Google的血液,所以它几乎成了每一个App的标配控件.但是,假如ViewPager的每一个Fragment都需要通过网络拉取数据加载,而ViewPager是默认加载前两项的,所以在很容易造成网络丢包或者网络堵塞等问题,所以Fragment使用懒加载是非常有必要的. 举个栗子: 如上图所示,我们有两个大的Tab:人物和风景.而人物Tab下有

  • 前端JS图片懒加载原理方案详解

    目录 背景 原理 方案 方案一:img的loading属性设为“lazy” 使用方法 优点 兼容性 缺点 方案二:通过offsetTop来计算是否在可视区域内 优化 优点 缺点 方案三:通过getBoundingClientRect来计算是否在可视区域内 方案四:使用IntersectionObserver来判断是否在可视区域内 兼容性 优点 缺点 问题 布局抖动 响应式图片 SEO不友好 插件 背景 懒加载经常出现在前端面试中,是前端性能优化的常用技巧.懒加载也叫延迟加载,把非关键资源先不加载

  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    目录 环境: Angular 13.x.x 新建一个angular项目 懒加载工具栏组件 toolbar.module.ts toolbar.component.ts toolbar.component.html app.component.ts 环境: Angular 13.x.x angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默

  • vue实现路由懒加载及组件懒加载的方式

    一.为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 二.定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 三.使用 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 1.未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld'

随机推荐