小楼窗外的细雨 2019-02-27 17:57 采纳率: 33.3%
浏览 1529

【Angular】如何更好的解决项目发布更新后的缓存问题?

缓存好,缓存妙,缓存一样让人头疼。

虽然说,angular可以使用npm script的--prod来打包程序,同时,也会在文件名上标注MD5,用以识别有更新内容和无更新内容的文件。

但是,假设我在更新前是一直停留在A页面,那么我在A页面上的变更,就算更新发布之后,也要过一小段时间后才会更新。那这个时候,如果要操作什么数据啊,等等就很麻烦了。这种情况该怎么破?

再假设,如果我一直停留在B页面,但是,这一次的更新,我已经删掉了B页面的内容,并更新发布了。结果,B页面还是可以继续操作,我从B跳转到A页面,然后再回退,还是可以进到B页面的。除非等到浏览器自动刷新或者我主动刷新,才会404。这种情况又该怎么破呢?

在网上,有看到一个方法,就是还可以在URL上加上随机数或者时间戳来保证没有缓存。如果是加时间戳,是加在href中或者js中,还是加在app.routing.ts中(loadChildren)?

或者,还有更好的办法吗?

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-08 02:34
    关注

    以下回答参考 皆我百晓生券券喵儿 等免费微信小程序相关内容作答,并由本人整理回复。

    Angular 2+ 解决方案

    1. 利用 @Input@Output:Angular 2+ 提供了 @Input@Output 的特性,可以帮助我们控制DOM元素的状态,从而实现缓存优化。例如,你可以设置一个输入属性(@Input())来控制某个组件是否应该被缓存,而另一个输出属性(@Output())则用来通知其他组件当前状态的变化。
    @Component({
        selector: 'my-component',
        template: `
            <input #input [(ngModel)]="someValue" />
            <button (click)="someAction()">Some Action</button>
        `,
    })
    export class MyComponent {
        someValue = '';
        someAction() {
            this.someValue = 'new value';
        }
    }
    
    1. 使用 asyncPipe 或者 pipe()asyncPipe 可以让你的管道在执行完所有依赖项之前返回一个值,这有助于避免不必要的重载。此外,你也可以使用 pipe() 方法来创建一个新的 pipe,这个 pipe 只处理一部分逻辑,而将其余部分交给父级组件或服务来处理。

    2. 利用 ObservablemergeMap:如果你有一个需要频繁更新的数据源,你可以考虑使用 Observable 来订阅数据变化,并且只在改变时更新 DOM。然后,你可以使用 mergeMap 方法来合并多个 Observable,这样即使有多个 Observable 发生改变,整个组件也不会出现混乱。

    import { Component, OnInit } from '@angular/core';
    
    @Component({
        selector: 'my-component',
        templateUrl: './my.component.html'
    })
    export class MyComponent implements OnInit {
    
        private data$: Observable<string>;
    
        constructor(private service: Service) {}
    
        ngOnInit(): void {
            // Initialize your data$ here
            this.data$ = this.service.getData();
        }
    
        async updateData(newData: string): Promise<void> {
            await this.service.updateData(newData);
            this.data$.next(newData);
        }
    }
    
    1. 利用 environment 配置:在 environments/environment.ts 文件中添加以下配置:
    // ... other environment configuration
    
    export const environment = {
        production: true,
        // ...
    };
    

    现在,当生产环境切换为开发环境时,你的应用程序会重新加载所有资源,包括缓存。

    评论

报告相同问题?