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 项目迭代+记录采坑

最新文章

热门文章