Die probleem met kas in blaaiers

Die blaaier kas die aangehegte CSS-stylilêers, JavaScript-skripts en prente. Kas beteken dat die aangehegte lêers deur die blaaier slegs afgelaai word met die eerste keer dat die gebruiker die webwerf besoek. Met daaropvolgende besoeke sal hierdie lêers nie weer afgelaai word nie, maar sal uit die blaaier se kas geneem word.

Kas is nuttig. Dit is geskep vir die verbetering van die webwerf se laaisnelheid. Dis immers vinniger vir die blaaier om 'n lêer uit sy eie stoor te neem, as om dit elke keer van die internet af te laai.

Vir die spoed moet eger betaal word met ongerief tydens ontwikkeling. Die feit is dat as jy iets in jou kode verander en dan die veranderinge op die gasheerplaas - sal alle gebruikers wat reeds jou webwerf besoek het die ou gekasde kopie van die kode hê.

Eerste oplossing vir die probleem

Om hierdie gedrag te beveg, moet elke keer die veranderde lêers hernoem word. In die praktyk is dit nie gerieflik nie, daarom word 'n slim truuk gebruik. Die kern daarvan is dat, wanneer 'n lêer aangeheg word, na die lêernaam 'n vraagteken, gelykaan-teken en die nommer van jou skrip se weergawe geplaas word. So 'n konstruksie word 'n GET-parameter genoem.

Die teenwoordigheid van 'n GET-parameter in die lêernaam "bederf nie" die pad vanuit die bediener se oogpunt nie, en wys steeds na dieselfde lêer. Maar vanuit die blaaier se oogpunt laat die verandering van die GET-parameter die blaaier glo dat die pad na die lêer verander het en dwing dit om die lêer weer af te laai.

Om die kas te beveg, wanneer jy veranderinge aanbring in jou kodelêer, sal jy die waarde van die GET-parameter met een moet verhoog. Sien die voorbeeld van die toepassing van so 'n benadering:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

Tweede oplossing vir die probleem

Daar bestaan ook 'n meer gevorderde benadering. Dit behels dat daar by die lêername ewekansige snare gevoeg word, byvoorbeeld, soos volg:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

Hierdie snare word hasse genoem. 'n Hash verteenwoordig 'n unieke snaar. Dit word vanuit die inhoud van die lêer bereken op 'n spesiale manier. Dit beteken dat elke teks ooreenstem met sy eie unieke hash. As die teks van die lêer verander is, dan sal die hash daarvan ook anders wees en sal ons dit moet verander in die lêernaam.

Natuurlik, om hasse met die hand te bereken en lêers te hernoem is nie 'n goeie aktiwiteit nie. Daarom word hierdie benadering slegs gebruik as ons 'n instrument het wat ons in staat stel om outomaties hasse te bereken en lêers te hernoem, asook om die lêername na nuwe name te verander in die HTML-lêers. Webpack laat al hierdie dinge toe. Hieraan sal ons regdeur die handleiding leer.