Tout jQuery dans un seul fichier ou inclusion de plusieurs ?

**nicolas2603** · 22/07/2013, 09h38

Bonjour, je me tourne vers vous pour avoir des conseils selon votre expérience concernant le chargement des scripts jQuery sur un site Internet.
J'ai pris l'habitude, de ne charger qu'un seul fichier contenant la bibliothèque jQuery et tous les plugins, ainsi que le paramétrage des fonctions déterminées pour l'ensemble de mon site.
Le tout s'exécutant en fonction de l'url, du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// jQuery JavaScript Library v1.8.2
// jQuery Superfish v1.7.2
// jQuery Cookie Plugin v1.3.1
...
$(document).ready(function() {
     var url = $(location).attr('href');
     if (url.match(/affiche/g)) {
          // mes actions
     } else if (url.match(/produit/g)) {
          // mes actions
     }
});

Sauf que mon unique fichier JS pèse environ 500 ko.
Pour optimiser, je suis tenté de remplacer les actions de chaque page par une inclusion d'un script correspondant, de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// jQuery JavaScript Library v1.8.2
// jQuery Superfish v1.7.2
// jQuery Cookie Plugin v1.3.1
...
$(document).ready(function() {
     var url = $(location).attr('href');
     if (url.match(/affiche/g)) {
          $.getScript('affiche.js');
     } else if (url.match(/produit/g)) {
          $.getScript('produit.js');
     }
});

Pensez-vous que cela soit optimal ?
Merci d'avance pour votre retour d'expérience.

**danielhagnoul** · 22/07/2013, 10h38

Bonjour

Je vous recommande d'abandonner votre "solution" du fichier unique.

L'ordre d'entrée en scène des fichiers est toujours très important.

Utilisez les versions compressées (extension min pour minified) des fichiers JS.

Utilisez toujours un serveur de code (CDN jQuery, Google, Microsoft, etc ). Le client ne devra charger que les fichiers qui ne sont pas déjà dans le cache de son navigateur.

Utilisez un chargeur de code. Il optimise et réduit le temps de chargement.

Exemple avec le chargeur de code head.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
					$( "#datepicker" ).datepicker({
				        "changeMonth" : true,
				        "changeYear" : true,
				        "showButtonPanel" : true,
				        "beforeShow" : function( input, ObjPicker ){
				        	var jObjInput = $( input );
 
				        	if ( ! jObjInput.val().match( /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/ ) ){
					        	var date = new Date(),
					        		y = date.getFullYear(),
					        		m = date.getMonth(),
					        		d = date.getDate(),
					        		j = date.getDay(),
					        		n = -1;
 
					        	switch ( j ){
					        		case 0 : // dimanche -> vendredi
					        			n = -2;
					        			break;
					        		case 1 : // lundi -> vendredi
					        			n = -3;
					        			break;
					        		default : n = -1; // les autres jours
					        	}
 
					        	$( input ).val( ( d + n ) + "/" + ( m + 1 ) + "/" + y );
					        }
				        },
				        "beforeShowDay" : function( date ){
				        	return $.datepicker.noWeekends( date );
				        },
				        "onSelect" : function( dateStr, ObjPicker ){
				        	// this est l'input
 
				            console.log( dateStr );
				        }
					});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<p>Date: <input type="text" id="datepicker">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-11T01:09:14.644+02:00" pubdate>2013-07-11T01:09:14.644+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**nicolas2603** · 22/07/2013, 11h50

Merci pour le conseil, je vais tester de cette façon

Tout jQuery dans un seul fichier ou inclusion de plusieurs ?

jQuery

Discussions similaires

Partager

Partager