web-dev-qa-db-fra.com

Qu'est-ce que vous utilisez pour réduire et compresser les bibliothèques JavaScript?

Qu'est-ce que vous utilisez pour réduire et compresser les bibliothèques JavaScript?

javascriptcompressionminimizejscompress
54
flybywire

J'utilise YUI Compressor . Semble faire le travail bien fait!

33
jonstjohn

J'ai utilisé YUI Compressor pendant longtemps et je n'ai eu aucun problème avec cela, mais j'ai récemment commencé à utiliser Google Closure Compiler et j'ai eu un certain succès. Mes impressions à ce jour:

  • Il est généralement supérieur à YUI Compressor en termes de réduction de la taille du fichier. Par une petite quantité en mode simple, et par beaucoup en mode avancé.
  • Jusqu'à présent, le mode simple était aussi fiable que YUI Compressor. Rien de ce que j'ai nourri n'a montré de problèmes.
  • Le mode "compilation" avancé est idéal pour certains scripts, mais la réduction spectaculaire de la taille de votre script se fait au détriment de beaucoup d’ingérence dans votre code qui risque fort de le casser. Il existe des moyens de traiter certains de ces problèmes et comprendre ce qu'il fait peut permettre d'éviter beaucoup de problèmes, mais j'évite généralement d'utiliser ce mode.

Je suis passé à l'utilisation de Google Closure Compiler en mode "compilation" simple, car il surpasse légèrement YUI Compressor en général. Je l'ai utilisé beaucoup moins que le compresseur YUI, mais d'après ce que j'ai vu jusqu'à présent, je le recommande.

Un autre que je n'ai pas encore essayé mais qui semble prometteur est UglifyJS de Mihai Bazon .

42
Tim Down

Vous avez un troupeau de possibilités ici:

D'après mon expérience personnelle, je vous recommanderais d'utiliser le SDK Dojo pour créer une version personnalisée, que vous pourrez ensuite configurer pour utiliser soit leur compilateur ShrinkSafe habituel, soit Google Closure, qu'ils prennent également en charge maintenant. .

Pour ce qui est de la compression, je pense que Google Closure est celui qui donne les meilleurs résultats jusqu'à présent. Cependant, je suis généralement satisfait de ShrinkSafe. Il est un peu plus ancien et plus robuste, alors que Closure Compiler semble un peu nouveau sur le marché. (que vos parties prenantes pourraient ne pas aimer trop, par exemple).

Certaines personnes ne jurent que par le compresseur YUI. Personnellement, je ne peux pas vraiment en témoigner.

Maintenant, si votre question était de compresser les bibliothèques et pas seulement votre propre code JavaScript, cela devient évidemment plus complexe, comme vous en aurez besoin pour la plupart de ces outils exporter les symboles qui ne doivent pas être renommés ou supprimés. La plupart des compresseurs corrects suppriment les fonctions qu'ils pensent être inutilisées - ce qui est souvent le cas dans une bibliothèque, si ils ne sont pas liés à un projet, évidemment - et modifient les noms pour les raccourcir et utilisent moins de caractères - également un problème, car vous souhaitez évidemment un public API à ne pas altérer.

Vous pouvez également trouver d'autres discussions sur ce sujet et des informations dans la documentation de support des outils. Vous voudrez peut-être aussi jeter un œil à JSBuilder2 , une sorte de pendant à l’outil de compilation de Dojo (utilisez donc ShrinkSafe ou Closure Compiler) pour ExtJS (avec le compresseur YUI).

(Désolé, étant un nouvel utilisateur SO, je ne peux pas ajouter plus d'un lien, je ne peux donc pas créer de lien direct vers les outils.)

EDIT: en ce qui concerne les préoccupations exprimées dans certaines réponses, la compression pourrait introduire des bogues et faciliterait le débogage car le code n’est pas mutilé: oui, c’est une préoccupation valable. Toutefois:

  • vous obtiendrez une amélioration très significative en termes de bande passante si vous utilisez un minifier, même si la compression gzip est activée (et vous pouvez apprendre à exploiter la compression gzip en simplifiant la vie du compresseur
  • vous devriez simplement goûter votre code en mode débogage et en mode production pour vous assurer que le comportement est identique. Je veux dire, cela fait aussi partie de votre travail ...
  • certains de ces compresseurs existent depuis un certain temps et n'introduiront pas vraiment de bogues dans votre code. Ils réorganisent vraiment les choses et substituent des chaînes, vraiment.
  • certains compresseurs (par exemple, le système de construction dojo) sont livrés avec des options vous permettant de produire une sortie compressée et non compressée. Vous pouvez ainsi activer différents modes de débogage et de production, à l'aide de paramètres de requête, par exemple.
22
haylem

Je ne minimise pas du tout JavaScript: la compression gzip me convient assez bien et présente l'avantage supplémentaire que les messages d'erreur seront toujours utiles.

12
Christoph

Moi aussi j'utilise YUI Compressor. J'ai une tâche de fourmi comme celle-ci que j'utilise dans mes projets:

<!--
YUI Compressor tasks 
http://www.julienlecomte.net/yuicompressor/README
-->
<property name="yuicompressor.jar"
           value="C:/devlibs/yuicompressor-2.2.4/build/yuicompressor-2.2.4.jar"/>

<target name="js.compress">
    <!-- Create min directory under js direcrtory if it doesnt exist -->
    <mkdir dir="${js-directory}/min" />

    <apply verbose="true" executable="Java" parallel="false" failonerror="true">
        <fileset dir="${js-directory}" includes="*.js"/>
        <arg line="-jar"/>
        <arg path="${yuicompressor.jar}"/>
        <srcfile/>
        <arg line="-o"/>
        <mapper type="glob" from="*.js" to="${js-directory}/min/*-min.js"/>
        <targetfile/>
    </apply>
</target>
11
kosoant

L'emballeur de Dean Edward réalise de très bons taux de compression. Il a des implémentations en ligne de commande qui lui permettent d'être utilisé dans un processus d'intégration continue.

5
Darin Dimitrov

UglifyJS est un nouveau.

UglifyJS se compresse mieux que YUI Compressor et à peu près au même niveau que le compilateur Google Closure. Par exemple, la version compressée de jQuery à partir du compilateur Google Closure ne fait que 403 octets de moins que la version produite par UglifyJS - impressionnant! UglifyJS est également le plus rapide à courir par un long tir, battant Closure par plus de 6 secondes!

De plus, le code produit par UglifyJS est plus sûr que le code généré par Closure. Par exemple, Closure ne sait pas comment traiter eval ou {}, il enregistre simplement une erreur et continue de renommer les variables de toute façon. Ceci, évidemment, conduit à un code cassé. UglifyJS n'a pas ce problème.

Plus d'informations peuvent être trouvées ici: http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript-compressor-for-node-js

5
Louis

Google fermeture outils

Vous pouvez mapper la version réduite du code source sur le code source normal pour le débogage dans Firebug avec leur complément. 

4
epascarello

Voici une solution de Microsoft que vous pouvez intégrer à Visual Studio pour minimiser automatiquement les fichiers lorsque vous générez votre projet. 

À installer: 

Téléchargez le fichier msi à partir de: http://aspnet.codeplex.com/releases/view/40584

Vous devrez peut-être redémarrer votre ordinateur une fois terminé.

Utiliser:

Modifiez votre fichier .csproj et incluez les éléments suivants à la fin du fichier (mais avant la balise </Project>):

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

<Target Name="AfterBuild">
    <ItemGroup>
        <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />
        <CSS Include="**\*.css" Exclude="**\*.min.css" />
    </ItemGroup>
    <AjaxMin 
    JsSourceFiles="@(JS)"
    JsSourceExtensionPattern="\.js$"
    JsTargetExtension=".min.js"
    CssSourceFiles="@(CSS)"
    CssSourceExtensionPattern="\.css$"
    CssTargetExtension=".min.css"/>
</Target>

Désormais, lorsque vous construirez votre projet, tous les fichiers CSS et js ne se terminant pas par .min.js, .min.css seront minifiés (voir l'attribut "Exclure" pour exclure d'autres fichiers de la minification). 

3
Brandon Boone

J'ai déjà essayé le compresseur YUI, mais il me donne un message d'erreur.

Je suggère d'utiliser JSMIN pour minifier votre javascript:

http://www.crockford.com/javascript/jsmin.html

3
Billy

http://code.google.com/p/jsmin-php/

Bon vieux Doug Crockford :-) La beauté de ceci est que, avec le contrôle du cache, vous pouvez obtenir une compression automatisée unique lorsque cela est nécessaire. Ou, dans l'un de mes projets, je produis simplement les fichiers compressés/gzippés et les supprime lorsque je modifie. Pour un environnement de développement, je n’appelle tout simplement pas le script de minification.

1
Alex

J'utilise JavaScript :: Minifier de Perl. Cela fonctionne plutôt bien et vous pouvez par exemple remplacez certaines phrases par Perl.

0
Flo Edelmann

Il y a un très bon compresseur en ligne:

http://javascriptcompressor.com/

Vous pouvez également réduire les variables, si vous voulez encore plus de compression.

J'espère que ça aide

0
greuze

Voici un article décrivant comment utiliser YUI Compressor pour réduire les fichiers au cours de la construction: Compression de fichiers JS dans le cadre du processus de construction

0
Giorgi

http://caja.appspot.com/tools/index fait les trois HTML/CSS/JS.

0
Mike Samuel

J'utilise un script d'encapsulation simple (3-4 lignes) autour de JavaScript :: Minifier :: XS .

0
user42092

https://jawr.dev.Java.net/ est excellent pour la minification et la gestion des versions

0
Amareswar