[转]Angular4首页加载慢优化之路

本文转自:https://blog.csdn.net/itest_2016/article/details/80048398

Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能。在Web开发前后端流行的今天,我们在某个项目中也尝试使用该框架。

很快按照官网上的例子搭建了一个标准工程,在项目初期工程文件不是很多的时候,编译、打包、然后运行,访问项目的各个页面都很快。和传统的模板引擎相比这种前后端分离不仅工程化更加成熟(前端、后端开发人员专注自己的领域),而且各个页面加载速度很快,可是说第一次尝到了这种前后端完全分离所带来的好处。但渐渐的我们发现了一个问题,就是首页加载速度越来越慢了如下图:

耗时竟然已经达到了10s,但进入首页后各个页面加载速度依然很快。这时候就不得不分析原因了,其实答案很明显,有2个文件特别大分别是:main.bundle.js(2.3M)、vendor.bundle.js(4M)。而且这2个文件在第一次访问时必须会加载,为什么进入后访问就很快了?进一步分析,看看编译后这2个文件的源码,就能发现main. bundle .js是把我们所有模块自己编写的js都打包到一块了,然后vendor.bundle.js包含了angular的公共库。这样随着我们编写的js代码越来越多,引用的公共库越来越多的时候,页面的加载速度就会越来越慢。由于浏览器本身会缓存这些静态资源文件,而所有的文件都在第一次访问页面的时候都加载了,这样就导致第一次访问特别慢,后续各个页面都很快的奇怪现象。

我们传统web开发时css、js文件,有一个全局和各个模块单独这样划分的。这样等到需要的时候在加载对应css、js文件,加载时间被分摊到各个页面所以就不会出现某个页面加载慢的现象。其实可以类比,在angular中也有类似的优化方法。多模块懒加载便可以达到我们说的这种效果。

优化前我们工程就一个主模块文件(app.module.ts),路由跳转各页面其实都属于该模块一部分

如下图(路由对应各页面其实都是子组件,所以编译时都会被打包到同一个文件):

进行多模块拆分后如下图:

可以看到写法明显不同,每个路由页面其实都是一个单独模块,然后在编译时每个模块都会单独编译成一个文件。而且路由到某个页面时,才会加载该模块js文件。

多模块拆分之前,编译如下图:

拆分后:

关注main.bundle.js文件变成了605kb,然后多了很多chunk.js。这些chunk.js其实就是各个模块编译文件。

具体进行多模块拆分方法如下:

【step1】在工程src/app  目录下新建2个文件,root.module.ts、share.module.ts。

在root.module.ts放一些其它所有模块都要引用的component、service、pipe。对于service需要在providers中对外暴露,其它公共组件、模块在exports中暴露(注意:相同组件、模块不能在多个模块中重复引用,否则编译会报错,可以通过如下方法对外暴露一次)

然后在share.module.ts模块中import root.module.ts。此外该模块会存放一些公共component、service、pipe等会被除了app.module.ts在外其它模块引用。这样做的目地是减少app.module.ts引用公共库大小,在上面编译图中可以发现vendor.bundle.js文件也非常大,这样做的目的是减少该文件的大小(此处大概能优化个10%)。

【step2】

对各个路由模块做如下改造:

以job-record模块为例,如下图:

改造前:

改造后:

可以明显看到增加了2个新文件,job-record-routing.module.ts、job-record.module.ts。这2个文件的用途就是把job-record变成一个真正的子模块。

job-record-routing.module.ts内容如下(该模块路由配置):

job-record.module.ts内容如下(具体模块配置):

job-record目录下其它文件无须修改,对应其它页面都用类似方法做模块拆分。(注意:对于父子页面,由于子页面依赖父页面加载,所以不能这样做拆分。)

【step3】

app.module.ts做如下改下(和原来该模块编写方式对比提到)

进行了多模块拆分后发现,main.bundle.js文件确实变小了很多,已经达到我们预期,而且也不会随着我们自己编写js增加而越来越大了,这时候发现首页访问速度大概加快了30%。此时加载速度如下:

但还是很慢,几乎还需要5s时间,原因是vendor.bundle.js文件还是很大。

vendor.bundle.js都是angular本身依赖的一些公共库,不是我们自己编写的,所以刚刚的多模块优化对它的大小变化几乎没有影响。这是打开该文件可以看到明显没有经过压缩优化。查了一些官网文档和百度发现angular编译果然有优化方式。通过增加编译参数:--prod –aot

编译后发现,竟然报了一堆错误。不过不要惊慌,那是优化编译时对ts语法检查比较严谨,我们代码中很多地方写的不够严谨,只能硬着头皮一行行修改了,此外别无它法。

好不容易解决了上面优化报错地方。这时优化编译也过了,然后首页加载速度也是非常快了。可是访问其它页面时会报如下错误:

进一步分析是代码种如下地方报错(压缩后的)

原始报错代码位置如下图。

但仔细分析了此处代码,没有看错有问题地方。结合上面报错,进一步调试发现map相关代码在优化时被压缩没了自然报错,我们优化编译方式都是官方的,而且此处代码也并无问题,猜想可能是该模块没有显示引入。引入如下模块:

import ‘rxjs/add/operator/filter‘;

import ‘rxjs/add/operator/map‘;

import ‘rxjs/add/operator/mergeMap‘;

优化编译后发现问题果然解决了,现在首页访问速度提升了,各个页面访问也没有问题了(如果发现经过优化编译后,还会有其它类似问题,那么很可能就是某些依赖模块没有显示引入导致)。

优化后首页加载速度如下图:

最后部署在正式环境如nginx或tomcat下通过开启gzip压缩会发现静态文件大小还会进一步变小,页面访问速度还会提升。

多模块懒加载-> --prod –aot 优化方式编译 –> 服务端开启gizp压缩。3板斧解决Angular首页加载慢问题。
---------------------
作者:itest_2016
来源:CSDN
原文:https://blog.csdn.net/itest_2016/article/details/80048398
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/freeliver54/p/10349514.html

时间: 2024-10-12 02:19:10

[转]Angular4首页加载慢优化之路的相关文章

vue-cli3项目优化首页加载过慢的一些心得

博主最近发现vue-cli3项目做完后,点击首页加载时间好久啊,一般都要3-5s.这样的加载时间博主自己都受不了,所以就有了这个随笔,将自己的一些研究心得分享给大家. 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer,这个工具用作分析你项目的打包出来的js包的大小.然后你可以根据这个工具找到需要优化的js包优化.比如打的包js里echarts.momentjs等都很大,我可以对echarts.momentjs采用cdn方式引入 在vue-cli3

android加载速度优化,通过项目的优化过程分析

通过这么长时间的盒子开发以及之前手机项目的经验,总体感觉两种不同设备还是有很多不同的地方的,首先一点不同的就是,手机项目和电视项目默认启动页面加载速度有重要区别 对于手机:手机加载网络数据,由于屏幕小,如果主页有网络图片的情况下,基本都是显示默认图片,这也是由于网速的限制,更重要的是手机上基本是图文混排,用户没看到图片可能焦点就在文本上了. 对于电视:如果应用首页加载使用默认图,会感觉特别丑,因为屏幕大,重要信息都是图片,如果没有图片,那用户看到的都是空白,用户的焦点没有了,只有等待和抱怨. 因

页面加载性能优化

页面加载性能优化 在互联网网站百花齐放的今天,网站响应速度是用户体验的第一要素,其重要性不言而喻,这里有几个关于响应时间的重要条件: 用户在浏览网页时,不会注意到少于0.1秒的延迟: 少于1秒的延迟不会中断用户的正常思维, 但是一些延迟会被用户注意到: 延迟时间少于10秒,用户会继续等待响应: 延迟时间超过10秒后,用户将会放弃并开始其他操作: 因此大家都开始注重性能优化,很多厂商都开始做一些性能优化.比较有名的是雅虎军规,不过随着浏览器和协议等的发展,有一些已经逐渐被淘汰了.因此建议大家以历史

Unity3d插件SmoothMoves加载速度优化

我们游戏是使用Unity3d做的2D游戏,角色特效等都使用SmoothMoves来制作(在国内估计也算奇葩一朵吧,据说燃烧的蔬菜也是SmoothMoves作的),游戏中的所有的资源--角色.特效.技能ICON.角色ICON.音效等几乎都使用assetbundles来实现. 问题:加载一场战斗的时间大概要30s左右!!! 解决方案关键字:依赖打包.数据块共享.冗余数据剔除 优化后:5s左右 :) 1. 依赖打包 1.1 使用AssetDatabase.GetDependencies()接口可以查看

页面加载速度优化的12个建议

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷.那么该如何补救,提高网站页面的加载速度呢? 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.网站运营人员可以通过这些建议来解决页面加载速度难题.编译如下: 1.合并Js文件和CSS 将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文

H5缓存机制浅析-移动端Web加载性能优化【干货】

转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Dom Storgage(Web Storage)存储机制 2.3 Web SQL Database存储机制 2.4 Application Cache(AppCache)机制 2.5 Indexed Database (IndexedDB) 2.6 File System API 3 移动端Web加载

RecyclerView使用 及 滑动时加载图片优化方案

RecyclerView使用 及 滑动时加载图片优化方案 简述 本篇博文主要给大家分享关于RecyclerView控件的使用及通过继承RecyclerView来实现滑动时加载图片的优化方案,也同样能解决防止图片乱序的问题,之前有在网上有看到大神对Android中ListView异步加载图片乱序问题进行过分析,并深入剖析原理后分别给出了3种对应的解决方案:一 .使用findViewWithTag.二.使用弱引用关联.三.使用Volley框架提供的NetworkImageView. 看了之后思索了很

【Android笔记】listview加载性能优化及有多种listitem布局处理方式

在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容. 用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要按需填充并重新使用view来减少对象的创建. ListView加载数据都是在 1 public View getView(int position, View convertView, ViewGroup parent) { 2 3 ...... 4 5 }

js和css的顺序关系及js加载执行优化探索

1. head里的顺序如下,考虑会对请求有何影响: a. 外部js在css前面 <script src="1.js"></script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <linkrel="stylesheet" type="text/css" href=