#css #browser-cache #blazor-client-side #blazor-webassembly
#css #браузер-кэш #blazor-на стороне клиента #blazor-webassembly
Вопрос:
Я прочитал это, но все еще испытываю проблемы:
у меня есть сайт Blazor WebAssembly со статическим index.html файл, который загружает Blazor обычным способом. В its <head> у меня есть <link href="css/app.min.css" rel="stylesheet" /> . Этот файл создается из SCSS с использованием шага запуска Dockerfile при развертывании.
Согласно этой проблеме, мне не нужны URL-адреса для удаления кеша, так как Blazor автоматически запросит новый по мере необходимости. Тем не менее, когда я развертываю свой сайт и открываю его в Firefox, я получаю старые стили и вижу на вкладке Firefox developer tools network, что app.min.css извлекается из дискового кэша. Я должен нажать Ctrl F5, чтобы получить новые стили.
Итак, что происходит не так в этой цепочке? Мне кажется, что мне все еще нужен URL-адрес для кэширования для моего CSS при каждом развертывании. Что нужно настроить, чтобы мой CSS загружался при изменении двоичных файлов сайта, как предлагает Стив Сандерсон в этом вопросе?
Комментарии:
1. Если вы хотите, чтобы URL-адрес для очистки кеша при каждой загрузке страницы, вы можете добавить строку запроса к URL-адресу таблицы стилей, которая содержит (каждый раз) вновь сгенерированное случайное число или буквенно-цифровую строку. Например.
<link rel="stylesheet" href="css/app.min.css?858573639020382243246">.2. И это можно сделать автоматически каким-то образом в статическом index.html ?
3. ДА. Я не знаю, как вы это сделаете в blazor . Но в javascript :
let myStylesheet = document.createElement('link'); myStylesheet.setAttribute('rel', 'stylesheet'); myStylesheet.setAttribute('href', 'css/app.min.css?' (Math.random().toFixed(9) * 1000000000)); document.head.appendChild(myStylesheet);4. Да, я думал, что что-то подобное было бы довольно просто, но я хотел бы выяснить «правильный, простой» способ сделать это. Г-н Сандерсон говорит, что даже не нужно кэшировать, но я этого не вижу.
5. Теперь я подозреваю, что моя проблема на самом деле может быть ошибкой или проблемой дизайна в Firefox: support.mozilla.org/en-US/questions/1317462
Ответ №1:
Поздно играть в эту игру, но с новым компонентом .Net 6 HeadOutlet теперь вы можете настроить это намного проще. В моем конкретном случае я хотел настроить версию CSS из appsettings.json файла (значение которого задается временем сборки CI / CD). Для этого мне нужна была возможность чтения IConfiguration . Если это не является обязательным требованием, вы можете использовать любой код C # на этом этапе для получения вашей «версии». Я решил поместить это в свой App.razor файл, чтобы мне нужно было настроить его только один раз. Вот фрагмент App.razor того, как выглядит мой.
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
<HeadContent>
<link href="css/app.css?@(Configuration["BuildNumber"])" rel="stylesheet" />
</HeadContent>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Небольшой недостаток этого подхода означает, что вам нужно будет отделить стили CSS Blazor по умолчанию (если вы их используете), поскольку они не будут загружены, пока платформа Blazor не возьмет на себя управление приложением. Кроме того, не забудьте добавить HeadOutlet в свой проект WebAssembly Program.cs .
builder.RootComponents.Add<HeadOutlet>("head::after");
Комментарии:
1. работает ли этот подход и для Js?
2. да, это должно применяться и там. Вы также можете посмотреть, есть ли в .Net 7 какие-либо бонусы, которые помогут еще больше. Я еще не в курсе новых изменений.
Ответ №2:
Мой проект — это проект Blazor Wasm .Net 6. Я удалил ссылку на изолированный css-файл ( <link href="ProjectName.styles.css" rel="stylesheet"/> ) из заголовка в index.html файл и добавил приведенный ниже javascript на ту же страницу. Теперь он будет вставлять ссылку в заголовок, в данном случае с версией ГГГГМДДХМИСССССС.
var date = new Date();
var version = date.getFullYear() ("0" (date.getMonth() 1)).slice(-2) ("0" date.getDate()).slice(-2) ("0" date.getHours() ).slice(-2) ("0" date.getMinutes()).slice(-2) ("0" date.getSeconds()).slice(-2) ("00" date.getMilliseconds()).slice(-3);
if(!document.getElementById('mainCss')) {
var link = document.createElement('link');
link.id = 'mainCss';
link.rel = 'stylesheet';
link.href = 'ProjectName.styles.css' "?version=" version;
document.head.appendChild(link);
}
Ответ №3:
Добавьте ссылку на стиль на страницу blazor, которую можно кэшировать в зависимости от версии сборки, и считайте данные из «css / app.min.css» на страницу blazor.