angular 项目迭代+记录采坑
年中的时候 正在做的项目来了新的领导 给我们的NG4项目来了一次大整顿。
我们公司项目基本都是敏捷开发-->
开发出一个成熟的shared目录(里面有所有的公用组件 公用服务 公用工具类) 然后所有项目都可以用
因此每起一个项目 直接把shared目录拿过来 然后不论是画页面 还是写功能都方便了很多
但是凡事有利就有弊-->
由于这个shared目录在开发的时候 是一个后台去研究完NG4然后打的底 后面几乎所有的开发人员也可以在里面去进行二次开发
就导致shared目录特别乱 除了耦合性很高【明明已经拿来做B项目了 但是里面还有A项目的残余逻辑代码】
还有资源打包问题 / shared目录版本管理问题 / 插件引入问题 / 缓存问题 / 项目配置问题都一一浮现
领导花了几天看了NG4的英文原版文档 就开始弄了 然后给我们整理出了一个问题LIST:
1. 项目的默认路由配置的是/home 也就是首页
因此在走/login的时候也会先去走一遍/home 加载完资源再去走login 这样会引起浪费时长【home加载资源较多】
Solution:
在app.component中拦截url,增加鉴权判断
this.router.events.filter(event=>event.instanceof NavigationStart)
.subscribe((event:NavigationStart)=>{
if(event.url.includes('login')){
//直接进login模块
}else{
//鉴权如果不通过跳login模块
}
})
2. 大量css和js从style.default.css / styles.scss /.angular.json 引入,导致2个问题
i:打包后的js和css过大 且没必要 占带宽
ii:插件版本管理困难
Solution:
修改配置: 删掉.angular-cli.json中的scripts和styles(在index.html中以CDN的形式引入)
删掉src/styles.scss中可以以CND形式引入的css文件引入
删掉src/assets/libs/framework/css/style.default.css中可以以CDN形式引入的css文件引入
以下是修改后的index.html文件中的部分css和js直接从CDN引入
3 新版本发布后 打包后的index.html没有产生代码上的改变(即使内部css/js发生变化) 因此不会自动拉取最新代码而产生缓存问题
客户端需要清空缓存重新加载才能生效
Solution:
给index.html文件增加禁用缓存代码
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control content="no-cache"">
<meta http-equiv="Cache" content="no-cahce">
Nginx缓存优化
//html页面不缓存
location / {
add_header Cache-Control "private,no-store,no-cache,must-revalidate,proxy-revalidate";
root /**/euicc-portal/;
index index.html index.htm;
}
4.打的包过大且SourceMap没有禁止 代码规范未知
angular 项目迭代+记录采坑的更多相关文章
- angular采坑记录
在angular中会遇到一些莫名的问题,导致不能完成想要的功能,可能是某项用法使用错误,或许是angular相对应不支持,或者是我们功力根本就没有达到.为了在每次采坑之后能有所收获,再遇到时能理解其根 ...
- Charles 抓包工具安装和采坑记录
Charles 抓包工具安装和采坑记录 网络抓包是解决网络问题的第一步,也是网络分析的基础.网络出现问题,第一步肯定是通过抓包工具进行路径分析,看哪一步出现异常.做网络爬虫,第一步就是通过抓包工具对目 ...
- Antd前端开发采坑记录
背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...
- v8环境搭建采坑记录
项目组有把js接入C++服务求的需求,故开始了v8接入的工作,用了一天多时间,v8才在centos环境上成功安装,过程中踩了很多坑,下面将采坑过程记录如下: centos下编译安装v8: 查看ce ...
- HUE Oozie : error=2, No such file or directory采坑记录
HUE Oozie : error=2, No such file or directory采坑记录 1.错误详情 一直都是同一种方式在hue上定义workflow,不知为啥 今天定义的就是不行... ...
- uni-app采坑记录
1. uni-app采坑记录 1.1. 前言 这里记录下uni-app实践中踩的坑 1.2. 坑点 1.2.1. 触发事件@longTap和@longpress 这两个都表示长按触发事件,那么这两个有 ...
- vue项目打包采坑
1. vue项目打包采坑 1.1. vue运行报错error:Cannot assign to read only property 'exports' of object '#' 这个错误我是在打包 ...
- golang采坑记录
安装golang,引入第三方库,采坑 1.获取安装包 go语言中文网:https://studygolang.com/dl 官网地址:https://studygolang.com/dl 2.下载 选 ...
- Win7 node多版本管理gnvm采坑记录
采坑描述:下载新node版本及切换node失败 解决:1.要用管理员权限启动cmd:2.确保node是空闲的 Gnvm下载地址: 32-bit | 64-bit Github 1.下载之后为 得到一个 ...
随机推荐
- 0815NOIP模拟测试赛后总结
立个flag:今天一定改完最少两道题然后认认真真写题解. 8/16 upd:果然flag不要立太狠…… 赛时状态: 赛后的老师:这套题我就没想让你上100分. 120分的天皇大神撇了撇嘴. 众人:…… ...
- Glassfish安装、基本使用、在idea中配置Glassfish
Glassfish安装.基本使用. 一.glassfish简介 glassfish是一款web应用服务器,和tomcat一样,也是一款优秀的Servlet容器. 二.glassfish知识点 1.do ...
- java实现从实体到SQL语句的转换
使用过Hibernate,EF之类的ORM框架都知道一般的CRUD之类的简单操作,只要调用框架封装好了的方法,框架就自动生成相应的SQL语句了,参照实习公司给的代码,那个是C#版的,今天弄了一下jav ...
- docker中使用源码方式搭建SRS流媒体服务
一.背景 搭建流媒体服务的方式一般会采用nginx+rtmp和srs服务两种,前者是nginx加上插件所用,而后者是专门为了为了流媒体而生,在这一节中我们将从头搭建srs流媒体服务 二. 运行环境 为 ...
- PostgreSQL DISTINCT ON
https://stackoverflow.com/questions/3800551/select-first-row-in-each-group-by-group select DISTINCT ...
- 如何做系列(2)- XML转义字符
< < 小于号 > > 大于号 & & 和 ' ' 单引号 " " 双引号 也可以使用<![CDATA[ ]]> ...
- 跟我一起了解koa之koa的cookie(三)
代码中写入 然后我们每次刷新浏览器,代码里面的pvid都会改变 我们可以读取cookie 访问json数据出现结果
- 网络流Sap算法
GDKOi就快要开始了.没时间打解析,直接上模板. #include <cstdio> #include <cstring> #include <algorithm> ...
- 计算机基础(day02)
目录 什么是编程? 计算机的组成 CPU(大脑) 控制器 运算器 存储器 主存 外存 IO设备 input设备(输入设备) output设备(输出设备) 多核cpu 32位和64位 机械硬盘工作原理 ...
- Django项目:CRM(客户关系管理系统)--57--47PerfectCRM实现CRM客户报名流程02
图片另存为 16*16 名字修改为 bpm_logo.jpg /*! *bootstrap.js * * Bootstrap v3.3.7 (http://getbootstrap.co ...