Mettre javascript dans un fichier .js ou le décomposer en plusieurs fichiers .js?

Question

Mon application web utilise jQuery et quelques plugins jQuery (par exemple, la validation, la saisie semi-automatique). Je me demandais si je devais m'en tenir en un seul .js fichier de sorte qu'il pourrait être mis en cache plus facilement, ou de les sortir dans des fichiers séparés et n'inclut que ceux dont j'ai besoin pour une page donnée.

Je devrais aussi mentionner que mon inquiétude n'est pas seulement le temps qu'il faut pour télécharger l' .js fichiers, mais aussi combien la page ralentit sur la base du contenu de l' .js fichier chargé. Par exemple, l'ajout de la saisie semi-automatique plugin a tendance à ralentir le temps de réponse par les 100ms ou donc, de mon test de base, même lorsque mis en cache. Ma conjecture est qu'il a à parcourir les éléments dans le DOM qui sont les causes de ce retard.

Answer 1

Je pense que cela dépend de la façon dont souvent ils changent. Prenons cet exemple:

• JQuery: changer une fois par an
• 3e plugins partie: changer tous les 6 mois
• votre code personnalisé: changement chaque semaine

Si votre code personnalisé ne représente que 10% du total code, vous ne voulez pas que les utilisateurs à télécharger les autres 90% chaque semaine. Vous serait divisé en au moins 2 js: JQuery + plugins, et votre code personnalisé. Maintenant, si votre code personnalisé qui représente 90% de la taille réelle, il est plus logique de tout mettre dans un seul fichier.

Au moment de choisir la façon de combiner les fichiers JS (et même pour les CSS), je balance:

• par rapport la taille du fichier
• nombre de mises à jour de prévu

Answer 2

Commune pertinents, mais que leur réponse:

Il dépend du projet.

Si vous avez un assez limité site où la plupart des fonctionnalités est ré-utilisé dans de nombreuses sections du site, il est logique de mettre tous vos script dans un fichier.

Dans plusieurs grands projets web, j'ai travaillé sur, cependant, il a fait plus de sens de mettre le site à l'échelle de fonctionnalités dans un seul fichier et mettre le plus de section spécifique de la fonctionnalité dans leurs propres fichiers. (Nous parlons de grands fichiers de script ici, pour le comportement de plusieurs applications web, le tout servi sous le même domaine).

L'avantage de diviser le script dans des fichiers séparés, c'est que vous n'avez pas à servir les utilisateurs de contenu inutile et de la bande passante qu'ils ne sont pas à l'aide. (Par exemple, s'ils ne visitent jamais "App" sur le site, ils n'auront jamais besoin de 100K de script pour l'Application d'Une" section. Mais qu'ils auraient besoin de la commune à l'échelle du site de la fonctionnalité.)

L'avantage de garder le script dans un fichier, c'est la simplicité. De moins en moins de visites sur le serveur. Moins de téléchargements pour l'utilisateur.

Comme d'habitude, cependant, YMMV. Il n'y a pas difficile et rapidement la règle. Faites ce que fait le plus de sens pour les utilisateurs en fonction de leur utilisation, et basée sur la structure de votre projet.

Answer 3

Si les fichiers sont nécessaires dans chaque page, placez-les dans un seul fichier. Cela réduira le nombre de requêtes HTTP et améliorera le temps de réponse (pour de nombreuses visites).

Voir les meilleures pratiques de Yahoo pour d'autres conseils

Answer 4

Je serais assez bien d'accord avec ce qu'bigmattyh dit, ça ne dépendent.

En règle générale, j'essaie de regrouper les fichiers de script autant que possible, mais si vous avez quelques scripts qui ne sont utilisés que dans quelques zones du site, en particulier ceux qui effectuent de grandes DOM traversals sur la charge, il serait logique de les laisser dans un fichier distinct(s).
par exemple, si vous utilisez uniquement la validation de votre page de contact, pourquoi le charger sur votre page d'accueil?

En aparté, on peut parfois se faufiler ces fichiers dans interstitielle pages, où pas grand chose d'autre se passe, de sorte que lorsqu'un utilisateur des terres sur une autre assez lourd page qui en a besoin, il devrait déjà être mis en cache à utiliser avec prudence - mais peut-être une astuce bien pratique quand vous avez quelqu'un benchmarking vous.

Donc, comme quelques fichiers de script que possible, au sein de la raison.

Si vous envoyez un 100K monolithe, mais seulement en utilisant 20K de pour 80% des pages, envisager de fractionnement vers le haut.

Answer 5

Si vous aimez le code dans des fichiers séparés pour le développement, vous pouvez toujours écrire un script rapide pour les concaténer en un seul fichier avant la minification.

Un gros fichier est préférable pour réduire les requêtes HTTP comme d'autres affiches l'ont indiqué.