javascript - Front-end development. Local static files are frequently modified. How to solve the cache problem during preview?

Question

Our company downloads the project from SVN to the local, and then uploads it to the server after modifying it locally.
The current problem is that when several styles are modified locally, or externally linked js is previewed in the browser, the changes cannot be seen due to caching, and the cache can only be manually cleared. However, it is more troublesome when modifications are frequent. After looking at the method of adding timestamps to fis, it seems that the project is only reconfigured when deploying or updating. Is there any good method for this kind of local modification?

Answer 1

Disable cache through chrome
chrome dev tools > networks > disalbed cache, see the picture below

Answer 2

Add version number after css and js files

Answer 3

You can use Chrome’s clean cache plug-in. Just click the button of this plug-in every time you refresh the page. You don’t need Chrome’s refresh button

Answer 4

It is recommended to use a build tool such as webpack or gulp. When building the project, put the version number after the file to trigger the browser request.

Answer 5

Develop and deploy front-end code

Answer 6

After each modification, you can add a timestamp after the file to ensure that the requested file is a newly modified file, like the following
<link rel="stylesheet" href="css/main.css?i=2017051101">
<script src="js/config.js?i=2017051101"></script>

Answer 7

The button on the page can be forced to refresh
Button binding event location.reload()

Answer 8

CMD + SHIFT + R