Quelle est la meilleure méthode pour réduire la taille de mes fichiers Javascript et CSS?

Minify semble être l'une des façons les plus faciles de réduire Javascript.

activer zip au niveau du serveur web peut aussi aider.

plutôt que de modifier vos fichiers directement, je recommande de les compresser. La plupart des clients le soutiennent.

je pense que vous verrez que c'est plus facile et tout aussi efficace.

plus de détails sur les aventures de Jeff avec .

Compression et minify-ing (suppression des espaces blancs) sont un début.

en outre:

1. combinez tout votre JavaScript et CSS inclut dans un seul fichier. De cette façon, le navigateur peut télécharger les sources en une seule requête au serveur. Faites cette partie de votre processus de construction.

2. activez la mise en cache au niveau du serveur web en utilisant le cache-control l'en-tête http. Réglez l'expiration à une grande valeur (comme un an) de sorte que le navigateur ne téléchargera la source qu'une seule fois. Pour permettre des éditions futures, incluez un numéro de version sur la chaîne de requête, comme ceci:

<script src="my_js_file.js?1.2.0.1" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="my_css_file.css?3.1.0.926" />

je suis surpris que personne n'ait suggéré de gzipper votre code. Un droit ~50% d'économie là!

voir la question: meilleur compresseur javascript

selon que vous allez ou non gzip, vos fichiers JavaScript peuvent changer votre choix de compresseur. (Actuellement Packer n'est pas le meilleur choix si vous allez aussi gzip, mais voir la question ci-dessus pour la meilleure réponse)

Dojo Shrinksafe est un compresseur Javascript qui utilise un véritable interpréteur JS, donc il ne cassera pas votre code. Les autres peuvent bien fonctionner, mais Shrinksafe est un bon à utiliser dans un script de construction, puisque vous ne devriez pas avoir à re-tester le script compressé.

Shrinksafe peut aider: http://shrinksafe.dojotoolkit.org/ Nous sommes à l'utiliser et il fait un assez bon travail. Nous l'exécutons à partir d'une construction ant pour lors de l'empaquetage de notre application web.

Helping the YUI compresseur donne de bons conseils sur la façon de modifier vos scripts pour réaliser des économies encore meilleures.

Google héberge une poignée de fichiers pré-compressés de bibliothèque JavaScript que vous pouvez inclure dans votre propre site. Non seulement Google fournit la bande passante pour cela, mais basé sur la plupart des algorithmes de mise en cache de fichiers du navigateur, si l'Utilisateur a déjà téléchargé le fichier de Google pour un autre site, ils ne auront pas à le faire à nouveau pour le vôtre. Un joli petit bonus pour certaines des bibliothèques 90k+ JS là-bas.

Pour javascript, j'utilise de Dean Edwards Javascript Packer . Il a été porté sur .NET, perl, php4, php5, WSH, et il y a même un plugin aptana.

emballage Javascript vient dans quelques saveurs - certains juste rayer les commentaires et whitespace, d'autres vont changer vos noms de variables pour être concis, et d'autres, bien, je ne sais même pas ce qu'ils font, mais la sortie est certainement petite. La compression haut de gamme fonctionne en utilisant la fonction eval (), qui cela impose un fardeau supplémentaire au client, donc si vos scripts sont particulièrement compliqués, ou si vous concevez un matériel plus lent, gardez cela à l'esprit. le packeur Javascript vous donne l'option pour quel niveau de compression vous voulez utiliser.

pour CSS, le mieux que vous pouvez faire est strip whitespace et les commentaires. Heureusement, cela signifie que vous pouvez atteindre cela avec une fonction d'une seule ligne:

function compressCSS($css) {
    return
        preg_replace(
            array('@\s\s+@','@(\w+:)\s*([\w\s,#]+;?)@'),
            array(' ',''),
            str_replace(
                array("\r","\n","\t",' {','} ',';}'),
                array('','','','{','}','}'),
                preg_replace('@/\*[^*]*\*+([^/][^*]*\*+)*/@', '', $css)
            )
        )
    ;
}

alors que cette fonction et le packeur Javascript réduiront la taille des fichiers individuels, pour obtenir la meilleure performance de votre site, vous voudrez également réduire le nombre de requêtes HTTP que vous faites. Chaque fichier Javascript et CSS est une requête séparée, donc les combiner dans un fichier chacun donnera le résultat optimal. Au lieu d'essayer de maintenir un seul fichier bohemoth JS, vous pouvez utiliser le programme/technique que j'ai écrit sur mon blog (plug personnel sans vergogne) à http://spadgos.com/?p=32

le programme lit essentiellement un fichier de type "script de construction" qui combinera et compressera simultanément plusieurs fichiers Javascript et CSS dans un (de chaque) pour vous (ou plus, si vous voulez). Il existe plusieurs options pour la sortie et l'affichage de tous les fichiers. Il y a une plus grande écriture là-haut, et la source est librement disponible.

je donnerais un essai-drive aux nouveaux optimiseurs d'exécution en ASP.Net publié sur http://www.codeplex.com/NCOptimizer

compresseur YUI fait un assez bon travail à la compression à la fois Javascript et CSS.

YUI Compressor A mon vote, pour la simple raison qu'au lieu d'effectuer des transformations d'expressions régulières sur le code, il construit en fait un arbre d'analyse du code, similaire à un interpréteur Javascript, et le comprime ensuite de cette façon. Il est habituellement très prudent sur la façon dont il gère la compression des identificateurs.

en plus, il a un mode de compression CSS, avec lequel je n'ai pas joué autant.

CssTidy est le meilleur CSS optimiseur de qui, j'en suis conscient. Il supprime (configurablement) les commentaires, élimine les espaces blancs, réécrit pour utiliser les nombreuses règles de sténographie nickf mentioned , etc. Compresser le résultat permet aussi, comme d'autres l'ont mentionné.

le taux de compression peut être assez dramatique, et il vous permet de commenter longuement votre CSS sans vous soucier de la taille du fichier.

Malheureusement, ce niveau de prétraitement interagit avec certains des "hacks css" populaires de manière imprévisible (ou prévisible mais non désirée). certains travaillent , d'autres non, et certains nécessitent des paramètres de configuration qui réduisent le niveau de compression pour d'autres choses (en particulier les commentaires).

Essayer web compresseur outils de Boryi pour compresser les standards de votre fichier HTML (sans code Javascript et css code intégré, mais peut être lié ou importés), du code Javascript (correctement terminé avec ;), et le code css.

j'ai trouvé JSCompress une bonne façon non seulement de miniaturiser un JavaScript, mais de combiner plusieurs scripts. Utile si vous n'utilisez les différents scripts qu'une seule fois. Sauvé 70% avant la compression (et quelque chose de similaire après la compression aussi).

N'oubliez pas d'ajouter les mentions de droits d'auteur par la suite.