Очистить кэш vue js
Мы развернули последний код JavaScript, но не можем получить последний код JavaScript.
От редакции: этот вопрос наполовину дублируется в следующих местах, и ответ на первый из следующих вопросов, вероятно, является лучшим. Этот принятый ответ больше не является идеальным решением.
Это меня смущает: «Мы развернули последний код javascript, но не смогли получить последний код javascript»
Я думаю, вы имеете в виду, как заставить клиентские браузеры использовать вашу последнюю версию javascript, а не их кешированную версию - в этом случае вам нужен ответ Грега. Если вы хотите знать, как это сделать в собственном браузере, это ответ Дэвида Джонстона.
Распространенный подход - прикрепить ?version=xxx к файлам, связанным с JS, на этапе сборки. Каждая новая сборка будет запрашивать новую версию файла JS.
@JuanMendes Это не всегда работает. Этот же шаг рекомендуется, когда у людей возникают проблемы с просмотром последнего значка. Это просто не гарантировано.
Вы можете вызвать window.location.reload (true), чтобы перезагрузить текущую страницу. Он будет игнорировать любые кешированные элементы и получать с сервера новые копии страницы, CSS, изображений, JavaScript и т. Д. Это не очищает весь кеш, но имеет эффект очистки кеша для страницы, на которой вы находитесь.
Однако ваша лучшая стратегия - изменить путь или имя файла, как указано в других ответах. Кроме того, см. Обновление имен файлов: не используйте строку запроса по причинам, которые не следует использовать в ?v=n качестве схемы управления версиями.
Вау, спасибо! Это хорошо работает и для кэша приложений HTML5, загруженного из файла cache.manifest. У меня был старый манифест, который не удалялся из памяти, поэтому один браузер, в котором он был кэширован, просто не отображал новые файлы. Я набрал это в консоли javascript и работал нормально. Спасибо!
но ревью путем изменения имени файла . разве это не заставит вас оставить все предыдущие версии на месте? иначе вы получите много неудачных попыток от поисковых систем и то, что нельзя читать более старые версии (или изображения с закладками / ссылки)
@Manuel Это отключит доступ к странице только из кеша с точным URL-адресом, который вы назвали location.reload (true). Он никогда не очищает исходную страницу из кеша, поскольку он просто добавляет метку времени к новому запросу, и если есть другие вызовы, выполняемые асинхронно этой страницей, для этих запросов НЕ будет отключено их поведение кэширования. Например. Если вы обновляете страницу с помощью reload (true), которая загружает некоторый html, и на этой странице есть скрипт, который выполняет второй вызов ajax для отображения большего количества html на той же странице, кеширование второго запроса не будет отключено.
Вы не можете очистить кеш с помощью javascript. Обычный способ - добавить к файлу номер редакции или отметку времени последнего обновления, например:
Обратите внимание, однако, что многие прокси не кэшируют файл, если в нем есть строка запроса. См. Ответ Кевина Хакансона .
Как я могу очистить кеш, когда весь HTML-код был кеширован? Это не повлияет, даже если номер версии добавлен из-за кешированного HTML. Пожалуйста, помогите
Если я не могу очистить элемент кеша, почему MDN говорит, что я могу? Что мне не хватает? Я пробовал то, что говорит MDN, но не повезло.
Попробуйте изменить src файла JavaScript? Из этого:
Этот метод должен заставить ваш браузер загрузить новую копию файла JS.
Помимо кэширования каждый час или каждую неделю, вы можете кэшировать данные в соответствии с данными файла.
или даже использовать время модификации файла:
Могу ли я проверить, правильно ли я это понял ?: При выборе варианта 1 при изменении файла изменяется хэш контрольной суммы md5, который затем изменяет URL-адрес. Браузер видит новый URL-адрес и инициирует новую загрузку файла. Полученные данные, добавленные к URL-адресу, сервер игнорирует. Если это так, чертовски ловко.
Кроме того, интенсивно ли задействует MD5 для всего файлового процессора? Я подумываю сделать это навсегда для файлов css и js, но мне бы не хотелось, чтобы из-за этого снизилась скорость сервера.
Использование контрольной суммы - хорошая идея, но все должно быть сделано правильно. Его вычисление при каждом запросе для каждого файла значительно снизит вашу производительность. Строка запроса тоже не подходит для кеширования, см. Другие ответы. Правильное использование - добавить контрольную сумму (часть?) Или номер версии к имени файла и вместо этого использовать это новое имя (вы можете использовать сценарий сборки, чтобы сделать это автоматически при развертывании). См черновой , изм и usemin .
Вы также можете принудительно перезагружать код каждый час, например, в PHP:
@GMsoF - это просто дополнительный параметр get, который используется (в данном случае), чтобы сообщить браузеру, что это «другой» файл. Чтобы браузер сбросил кешированную версию и вместо нее загрузил эту. Это часто используется с «датой последнего изменения» файла. Я надеюсь это имеет смысл ;-)
поместите это в конец вашего шаблона:
window.location.reload(true) похоже, устарел стандартом HTML5. Один из способов сделать это без использования строк запроса - использовать Clear-Site-Data заголовок , который кажется стандартизованным .
попробуйте использовать это
Вот фрагмент того, что я использую в своем последнем проекте.
В процессе публикации создается файл с номером версии текущей сборки. Это работает путем кодирования URL-адреса этого файла и использования его в качестве средства блокировки кеша. В качестве аварийного переключения, если этот файл не существует, используются год и номер недели, чтобы кеширование продолжало работать, и оно будет обновляться не реже одного раза в неделю.
Кроме того, это обеспечивает блокировку кеша при каждой загрузке страницы в среде разработки, так что разработчикам не нужно беспокоиться об очистке кеша для любых ресурсов (javascript, css, вызовы ajax и т. Д.).
или вы можете просто прочитать файл js на сервере с помощью file_get_contets, а затем поместить в эхо в заголовок содержимое js
Возможно, «очистить кеш» не так просто, как должно быть. Вместо того, чтобы очищать кеш в моих браузерах, я понял, что «прикосновение» к файлу фактически изменит дату исходного файла, кэшированного на сервере (протестировано в Edge, Chrome и Firefox), и большинство браузеров автоматически загрузят самую последнюю свежую копию что у вас на сервере (код, графика тоже всякие мультимедиа). Я предлагаю вам просто скопировать самые последние сценарии на сервер и выполнить решение «на ощупь» перед запуском вашей программы, чтобы она изменила дату всех ваших проблемных файлов на самую последнюю дату и время, а затем загрузит новую копию в ваш браузер:
. остальная часть вашей программы .
Мне потребовалось некоторое время, чтобы решить эту проблему (так как многие браузеры по-разному реагируют на разные команды, но все они проверяют время файлов и сравнивают их с загруженной копией в вашем браузере, если разные дата и время, обновятся), если вы не может пойти предполагаемым правильным путем, всегда есть другое полезное и лучшее решение. С уважением и счастливого кемпинга.
Мне нравится такой подход, но, может быть, я использую его не в той области? Кто-нибудь знает, где это добавить в настройку WordPress? Я добавил его в файл functions.php с прямыми ссылками на файлы JavaScript и CSS, но мне все равно пришлось выполнить жесткую перезагрузку, чтобы изменения были замечены.
Что вам нужно сделать, это в вашем основном каталоге html wordpress отредактировать index.php, чтобы вызвать или выполнить команду Touch () для файлов, которые вам нужно обновить и загрузить. У меня были проблемы с маленькими картинками и js файлами, которые застревали в кеше. Я пробовал большинство описанных методов для освобождения из памяти, но лучший способ - загрузить текущий, свежий, правильный. Вы можете сделать это, просто выполнив «Touch Thing», поскольку он ничего не изменяет в файле, а просто обновляет текущее время и дату, чтобы обмануть ваш браузер, чтобы он подумал, что это другая версия файла, и проблема решена. Работает в большинстве браузеров
I have a VueJS app. Whenever I run npm run build it creates a new set of dist/* files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.
This is my index.html:
Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?
@andrei if that's the case, try removing any headers you've set for caching. The browser should handle the caching/serving of new content by default based on those hashes. But the other thing is you need to make sure you are referencing the new files in your HTML.
You might even have to hash your index.html file if that's not already being done for you, because if that is modified to reference new files but it is cached, then the index.html will always be the old version until cache is cleared.
Простой пример
В этом примере показана утечка памяти, вызванная использованием библиотеки Choices.js внутри компонента Vue без очистки ресурсов должным образом. Далее мы покажем как удалять остающееся после Choices.js и избежать утечки памяти.
В примере ниже, мы загружаем в select большое число вариантов выбора, а также используем кнопку для отображения/скрытия с помощью директивы v-if, чтобы добавлять и удалять список из виртуального DOM. Проблема в этом примере заключается в том, что директива v-if удаляет родительский элемент из DOM, но не выполняет дополнительную очистку DOM от частей, созданных Choices.js, что и вызывает утечку памяти.
Чтобы увидеть эту утечку памяти в действии, откройте этот пример на CodePen с помощью Chrome и затем откройте Диспетчер задач Chrome. Чтобы открыть на Mac, выберите в верхнем меню > Окно > Диспетчер задач или на Windows с помощью сочетания клавиш Shift+Esc. Теперь, нажимайте кнопку показать/скрыть около 50 раз. Вы сможете увидеть увеличение использованной памяти в Диспетчере задач Chrome, которая не будет освобождена.
Подробнее о значимости
Управлением памятью и тестированием производительности часто легко можно пренебречь в спешке выпустить готовый продукт, но, тем не менее, сохранение небольшого количества используемой памяти по-прежнему важно для пользовательского опыта использования в целом.
Определите типы устройств, которые ваши пользователи могут использовать и какой сценарий работы с приложением может быть. Могут ли они использовать ноутбуки или мобильные устройства с небольшим количеством памяти? Будут ли ваши пользователи обычно совершать много переходов между страницами приложения? Если ответы на эти вопросы — «да», тогда хорошие практики управления памятью могут помочь избежать вам наихудшего сценария сбоя браузера пользователя. Даже если ни один ответ на вопрос не будет «да», вы по-прежнему можете ухудшить производительность вашего приложения при длительном использовании, если не будете осторожны.
Альтернативы
Мы обсудили управление памятью при удалении элементов, но что, если вы намеренно хотите сохранять состояние и сохранить элементы в памяти? В этом случае вы можете использовать встроенный компонент keep-alive.
Когда вы оборачиваете компонент с помощью keep-alive , его состояние будет сохранено, и следовательно, останется в памяти.
Эта техника может быть полезна для улучшения пользовательского опыта работы с приложением. Например, представьте, что пользователь начинает вводить комментарий в текстовое поле и затем решает перейти на другую страницу. Если пользователь вернётся обратно, то его комментарий останется сохранён в поле.
С тех пор, как начнёте использовать keep-alive, у вас появится доступ к двум дополнительным хукам жизненного цикла: activated и deactivated . Если вы хотите выполнить очистку или изменить данные при удалении компонента с keep-alive, вы можете сделать это в хуке deactivated .
7 Answers 7
We struggled with this same issue and found that some people's browsers would not even pull the latest version unless they manually refreshed. We had problems with caching at various layers, including the CDN where we hosted files.
We also struggled with maintaining versions and being able to rapidly redeploy a previous version if something goes wrong.
Our solution (using project based on vue-cli Webpack):
1) We build the distribution to have a version specific folder instead of 'static'. This also helps us track builds and 'undo' a deployment if needed. To change the 'static' directory, change 'assetsSubDirectory' under 'build' in index.js and change 'assetsPublicPath' to your CDN path.
2) We use Webpack Assets Manifest to build a manifest.json file pointing to all the assets. Our manifest includes a hash of all files, as its a high security application.
3) We upload the versioned folder (containing the js and css) to our CDN.
5) To publish a new version, we post the manifest.json to the backend server. We do this via a GraphQL endpoint but you could manually put the json file somewhere. We store this in the database and use it to populate the index.html and also use it to verify files using the file hash (to validate our CDN was not hacked).
Result: immediate updates and an easy ability to track and change your versions. We found that it will immediately pull the new version in almost all user's browsers.
Another bonus: We are building an application that requires high security and hosting the index.html on our (already secured) backend enabled us to more easily pass our security audits.
We found that corporate networks were doing proxy caching, despite no-cache headers. IE 11 also seems to ignore cache headers. Thus, some users were not getting the most up to date versions.
We have a version.json that is incremented/defined at build time. Version number is included in manifest.json. The build bundle is automatically uploaded to S3. We then pass the manifest.json to the backend (we do this on an entry page in Admin area). We then set the "active" version on that UI. This allows us to easily change/revert versions.
The backend puts the "currentVersion" as a Response Header on all requests. If currentVersion !== version (as defined in version.json), then we ask the user to click to refresh their browser (rather than force it on them).
Если вы разрабатываете приложения на Vue, тогда вам нужно следить за утечками памяти. Эта проблема особенно важна в одностраничных приложениях (SPA), потому что идея использования SPA состоит в отсутствии пользователям необходимости обновлять страницы браузера, поэтому задачей JavaScript приложения также будет и очистка в компонентах от лишнего.
Утечки памяти в приложениях Vue обычно не исходят от самого Vue, скорее они могут происходить при интеграции других библиотек в приложение.
Подытожим
Vue позволяет легко разрабатывать потрясающие реактивные JavaScript-приложения, но вам всё равно нужно уделять внимание утечкам памяти. Эти утечки обычно происходят при использовании дополнительных сторонних библиотек, которые манипулируют DOM вне Vue. Не забудьте проверить ваше приложение на утечки памяти и предпринять соответствующие шаги для добавления необходимых очисток в компонентах, где это необходимо.
is a built-in component that allows us to conditionally cache component instances when dynamically switching between multiple components.
In the Component Basics chapter, we introduced the syntax for Dynamic Components, using the special element:
By default, an active component instance will be unmounted when switched away from. This will cause any changed state it holds to be lost.
In the example below, we have two stateful components - A contains a counter, while B contains a message synced with an input via v-model . Try update the state of one of them, switch away, and then switch back to it:
Current component: A
You'll notice that when switched back, the previous changed state would have been reset.
Creating fresh component instance on switch is normally useful behavior, but in this case, we'd really like the two component instances to be preserved even when they are inactive. To solve this problem, we can wrap our dynamic component with the built-in component:
Now, the state will be persisted across component switches:
Current component: A
When used in DOM templates, it should be referenced as .
By default, will cache any component instance inside. We can customize this behavior via the include and exclude props. Both props can be a comma-delimited string, a RegExp , or an array containing either types:
The match is checked against the component's name option, so components that need to be conditionally cached by KeepAlive must explicitly declare a name option.
We can limit the maximum number of component instances that can be cached via the max prop. When max is specified, behaves like an LRU cache: if the number of cached instances is about to exceed the specified max count, the least recently accessed cached instance will be destroyed to make room for the new one.
When a component instance is removed from the DOM but is part of a component tree cached by , it goes into a deactivated state instead of being unmounted. When a component instance is inserted into the DOM as part of a cached tree, it is activated.
A kept-alive component can register lifecycle hooks for these two states using onActivated() and onDeactivated() :
A kept-alive component can register lifecycle hooks for these two states using activated and deactivated hooks:
onActivated activated is also called on mount, and onDeactivated deactivated on unmount.
Both hooks work for not only the root component cached by , but also descendent components in the cached tree.
In a short while, I might be describing what this article is going to be about. But before that, let me tell what this article is “not” about. This is not about service workers or PWA and the caching headaches that come along with it. The problem that we faced is with more of a vanilla Vue JS front end, not able to refresh itself whenever a new deployment happens. Let me try to explain it in a more lucid way.
Vue JS is supposed to be a single page application and there is no classical server request/response with the page loading every time. This is a huge plus with frameworks like Vue and the likes of React, Angular, Svelte etc. However, whenever a new version of the application is rolled out and that the entire Javascript file is changed and ready to be served as an update to the end-user, the browser is still not aware of this change, simply because no one explicitly requesting for it. For this simple reason, the new changes that you make and deploy, are not going to be available to your end-user who has the application already open. A simple example might be a new addition/deletion to your menu item.
This is fatal. Yes, a browser refresh will make this problem go away. However, good luck telling that to your thousands of live users that have the application currently open and running.
To address this problem, I searched in various places finding for a solution. To my surprise, there were many developers with similar problems without any concrete or out-of-the-box solution readily available. Hence, I went ahead and implemented one myself and that is what I want to share with you.
This solution is very tailor-made to my stack which has a Vue Frontend with a Rails on the backend. However, the solution is ubiquitous in terms of the concept. Essentially, whenever the front end is deployed, I am going to assign it a unique version to it. In my case, I use my last commit hash to keep things extremely straightforward.
Once I know that my server is going to send this information in “every” request, I can rest assured that the version that I am dealing with is the latest. Armed with this knowledge and the wonderful localStorage , I simply intercept the Axios config with these few lines of code, and voila, I am done!
That's it! This ensures, that whenever a new version is found in the response head “and” that the request is a GET, simply reload the current page.
As I said earlier, I was using a rails backend, for those caught up in similar waters, this solution should help on how I ship the version number on the request. With Rails, it's unsurprisingly straightforward.
application.rb (for development assuming Vue runs on port 8080)
With this simple configuration, you can ensure that your solution is both fast and also the least obtrusive.
Francium Tech is a technology company laser focused on delivering top quality software of scale at extreme speeds. Numbers and Size of the data don’t scare us. If you have any requirements or want a free health check of your systems or architecture, feel free to shoot an email to contact@francium.tech, we will get in touch with you!
Исправление утечки памяти
В примере выше, мы можем использовать наш метод hide() для выполнения очистки и устранения утечки памяти перед удалением select из DOM. Для этого мы будем хранить свойство в нашем экземпляре Vue и будем использовать API плагина Choices в методе destroy() для выполнения необходимых операций очистки.
Проверьте использование памяти в обновлённом примере на CodePen.
Пример из жизни
В примере выше, мы использовали директиву v-if чтобы проиллюстрировать утечку памяти, но более распространённый сценарий из жизни возникает при использовании vue-router для маршрутизации по компонентам в одностраничном приложении (SPA).
Также, как и директива v-if , vue-router удаляет элементы из виртуального DOM и заменяет их новыми элементами при навигации пользователя по вашему приложению. Хук жизненного цикла beforeDestroy() — хорошее место для решения подобной проблемы в приложениях на основе vue-router .
Мы могли бы переместить нашу очистку в хук beforeDestroy() следующим образом:
Читайте также: