Kombinere gjenstander. Hvordan kombinere Javascript-filer i WordPress til én fil
Denne handlingen reduserer antallet forespørsler til serveren, og øker dermed hastigheten på nettstedet. Dette gjelder spesielt for HTTP1.1 og sider som krever mer enn 20 forespørsler. I tillegg tilfører dette poeng i testen (som for mange er det viktigste).
Hvordan kombinere Javascript-filer i WordPress til én fil - No-Plugin-metoden
Generelt er det plugins for denne oppgaven, men i kommentarene til disse pluginene er det mange anmeldelser i ånden "det fungerer ikke."
Hvis du gjør det "helt manuelt", må du ta alle haugene med kode manuelt og kopiere dem til én fil. Denne metoden anbefales ikke da den har mange ulemper som:
1.) Det er vanskelig å finne javascript-fildeskriptornavnet, dette er i motsetning til CSS-filer hvor vi kan finne id-attributtet deskriptornavn. Dette håndtaket er viktig fordi vi trenger det for å avregistrere skript etter at sammenslåingsprosessen er fullført.
2.) Mangel på fleksibilitet. Hvis det er addisjon eller subtraksjon av en javascript-fil, må vi rekombinere den filen manuelt.
3.) Det kan ikke garanteres at de kombinerte kodebitene ikke vil komme i konflikt. Dette har å gjøre med sekvensen av funksjonskall og javascript-variabelomfang.
Hvordan kombinere Javascript-filer i WordPress til én fil - automatisk
For automatisk å slå sammen javascript-filer i WordPress-er, må du først samle banene til javascript-filene sammen med navnene på håndtakene deres (i likhet med den manuelle metoden, bare automatisk).
Vi kan finne all informasjon om javascript-filer lastet på en WordPress-side i WP_Scripts-objektet.
Dette objektet er lagret i $wp_scripts-variabelen og kalles i malseksjoner som wp_head, wp_print_scripts (wp_enqueue_scripts), wp_footer, init. Her er et par av de vanligste tilfellene.
En gang. I hodet (taggen) kan vi definere dette ved å bruke wp_head-kroken.
Toere.
I bunnteksten (før taggen) kan vi definere dette ved å bruke wp_footer-kroken.
Åpne functions.php-filen for redigering, som ligger i temamappen som brukes, og legg til koden der:
Kode: add_action("wp_head", "show_head_scripts", 9999);
add_action("wp_footer", "show_footer_scripts", 9999);
// Vises øverst, før du åpner kroppen
funksjonen show_head_scripts())(
globale $wp_scripts;
}
ekko ""; print_r($wp_scripts->ferdig); ekko "";
// Vises under, etter kjelleren
funksjonen show_head_scripts())(
globale $wp_scripts;
}
Nå åpner vi siden, ser på kilden og ser lister over stier til JS-filer (øverst og nederst på siden).
Kombinere javascript-filer til én fil i WordPress
For å slå sammen, må du samle stier til filer som kan oppdages automatisk før innholdet vises. Wp_enqueue_scripts-kroken er egnet for dette. Det er noen ulemper med dette (beskrevet nedenfor), men dette er det eneste trikset vi kan bruke automatisk.
Hvordan dette gjøres (beskrivelse av kodelogikk):
1.) Javascript-filhåndtaket kopieres i henhold til dets avhengighet slik at det etter sammenslåing kan kjøres uten feil. Vi kan gjøre dette ved å kalle all_deps-metoden på WP_Scripts-objektet($wp_scripts->all_deps($wp_scripts->queue));
2.) Hente kode i javascript-filer (ved å bruke file_get_contents) og kombinere med andre. Inkludert lokaliseringsskriptet wp_localize_script (hvis tilgjengelig). Dette skriptet finnes i $ wp_scripts-> registrerte ["handle"] -> ekstra ["data"]
3.) Skriv den kombinerte koden til en fil (ved hjelp av file_put_contents) og last den ved hjelp av funksjonen wp_enqueue_scripts.
4.) Avregistrer alle skript/håndtak som er slått sammen, dette gjøres etter å ha fullført prosessen beskrevet i forrige avsnitt (hvis vi avregistrerer et script, vil dets avhengige script også bli avregistrert).
For å få motoren til å gjøre alle disse oppgavene, lim inn følgende kode i functions.php-filen:
Kode: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
funksjonen merge_all_scripts()
{
funksjonen show_head_scripts())(
/*
#1. Omorganiser håndtakene basert på deres avhengighet,
Resultatet vil bli lagret i to_do-egenskapen ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->queue);
// Ny filplassering: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() . DIRECTORY_SEPARATOR . "merged-script.js";
$merged_script = "";
// Loop javascript-filer og lagre i $merged_script-variabelen
foreach($wp_scripts->to_do as $handle)
{
/*
Rydd opp i nettadressen, for eksempel wp-content/themes/wdc/main.js?v=1.2.4
bli wp-content/themes/wdc/main.js
*/
$src = strtok($wp_scripts->registred[$handle]->src, "?");
/**
#2. Kombiner javascript-filen.
*/
// Hvis src er url http / https
if (strpos($src, "http") !== usann)
{
// Få nettstedets url, for eksempel: http://webdevzoom.com/wordpress
$site_url = site_url();
/*
Hvis vi er på lokal server, endre url til relativ bane,
f.eks. http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
bli: /wp-content/plugins/wpnewsman/css/menuicon.css,
dette er for å gjenbruke HTTP-forespørselen
Hvis ikke, f.eks. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css,
så la være som den er (vi hopper over det)
*/
if (strpos($src, $site_url) !== usann)
$js_file_path = str_replace($site_url, "", $src);
ellers
$js_file_path = $src;
/*
For å kunne bruke file_get_contents-funksjonen må vi fjerne skråstrek,
f.eks. /wp-content/plugins/wpnewsman/css/menuicon.css
bli wp-content/plugins/wpnewsman/css/menuicon.css
*/
$js_file_path = ltrim($js_file_path, "/");
}
ellers
{
$js_file_path = ltrim($src, "/");
}
// Sjekk om filen eksisterer og slå sammen
if (fil_exists($js_file_path))
{
// #3. Se etter wp_localize_script
$localize = "";
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) (
$localize = $obj->ekstra["data"] . ";";
}
$merged_script .= $localize . file_get_contents($js_file_path) . ";";
}
}
// skriv det sammenslåtte skriptet inn i gjeldende temakatalog
file_put_contents($merged_file_location, $merged_script);
// #4. Last inn URL-en til den sammenslåtte filen
wp_enqueue_script("merged-script", get_stylesheet_directory_uri() . "/merged-script.js");
// 5. Avregistrer håndtak
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script($håndtak);
}
}
Sjekker at sammenslåingen var vellykket
Gå til bloggsiden, åpne kilden og se etter den tilkoblede merged-script.js-filen i den
Kontroller så at det ikke er noen feil i det kombinerte skriptet ved å åpne nettleserens «utviklerverktøy» (trykk F12 i Google Chrome) og velge Konsoll-fanen.
Konsollen viser teksten til feilen og refererer til stedet der den oppstod. Hvis det ikke er noen forbannelsesord på filen merged-script.js, er alt ok.
Sjekk funksjonaliteten til andre skript som ikke deltok i sammenslåingen.
Originalartikkel på engelsk du katten leste der.
Kombinerer innholdet i to eller flere spesifiserte JavaScript-objekter. Resultatet av foreningen skrives til det første av disse objektene (det vil også bli returnert av funksjonen etter at det er utført). Funksjonen har to bruksområder:
kombinerer innholdet i objekter mål, objekt1,.., objektN, legger resultatet inn i et objekt mål.
Funksjoner ved brukHvis du spesifiserer to eller flere objekter, vil resultatet være deres forening. I tilfelle du spesifiserer bare ett objekt, vil extend()-funksjonen legge til innholdet til det globale $(jQuery)-objektet. På denne måten kan du utvide mulighetene til biblioteket ved å legge til dine egne funksjoner i navneområdet. Dette kan være nyttig når du skriver plugins.
Husk at som et resultat av sammenslåing av objekter, vil den første av dem bli endret (den vil også bli returnert som et resultat av utvidelse()-funksjonen). Hvis du vil at ingen av de angitte objektene skal endres, kan du angi som en parameter mål tomt objekt:
var objekt = $.extend (( ), objekt1, objekt2);
Rekursiv (dyp) kopieringNår du slår sammen objekter, overskrives samsvarende felt:
var objekt1 = (eple: 0, kirsebær: 97);
var objekt2 = (eple: 5, durian: 100);
$.extend(objekt1, objekt2);
/* Resultatet blir som følger: ( eple:5, kirsebær:97, durian:100 ); */
Som standard utfører extend() en grunn forening av objekter, noe som betyr at hvis de inneholder andre objekter inne i dem, vil extend() overskrive dem som i forrige tilfelle:
var objekt1 = (eple: 0, banan: (vekt: 52, pris: 100), kirsebær: 97);
var objekt2 = ( banan: ( pris: 200 ), durian: 100 );
$.extend(objekt1, objekt2); /* Resultat: ( eple:0, banan:(pris:200), durian:100, kirsebær:97, ); */ Hvis du imidlertid angir true som den første parameteren, vil en dyp kopi bli utført, der sammenslåingsprosedyren vil bli brukt på de interne objektene (i stedet for å omskrive som i forrige tilfelle):
var objekt1 = (eple: 0, banan: (vekt: 52, pris: 100), kirsebær: 97);
var objekt2 = ( banan: ( pris: 200 ), durian: 100 );
$.extend(true, objekt1, objekt2);
/* Resultat: ( eple:0, banan:(vekt:52, pris:200), durian:100, kirsebær:97, ); */
– Komprimer stiler, optimaliser stiler.
– Komprimer skript, optimaliser skript.
– Asynkronattributt på bunntekstens skripttag, last inn skript asynkront.
– Ressurser for å ekskludere, her kan du ekskludere visse skript eller stiler.
– Aktiver logg, aktiver loggfillogging.
– Utviklingsmodus, hvis du aktiverer denne parameteren, vil cachen bli slettet hver gang siden lastes inn på nytt.
– Lagre, lagre endringene.
– Tøm AssetsMinifys cache, klikk på denne fanen for å slette cachen manuelt.
Alt er klart!
77
Etter å ha lagret innstillingene, vil alle skript og stiler på nettstedet ditt bli kombinert til én fil. Dette refererer til skriptene og stilene som vises i kildekoden til nettstedet ditt. På denne måten vil siden din lastes raskere!
Jeg prøver å optimalisere nettstedets ytelse ved å konsolidere og komprimere CSS- og JS-filer. Spørsmålet mitt er mer relatert til de (spesifikke) trinnene for hvordan man oppnår dette, gitt den faktiske situasjonen jeg møtte (selv om dette burde være vanlig for andre utviklere også).
- For en produktutgivelse vil jeg gjerne kombinere 3 CSS-filer til én og komprimere den ved å bruke for eksempel YUI Compressor. Men da må jeg oppdatere alle sidene som trenger de 3 filene for å koble til den nylig endrede CSS-en. Dette virker utsatt for feil (f.eks. at du sletter og legger til noen linjer i mange filer). Noen annen mindre risikofylt tilnærming? Samme problem for JS-filer.
13 svar
Sortering:
12
Aktivitet
Du kan kjøre den i en mauroppgave og dermed inkludere den i meldingene dine/pre commit hooks hvis du bruker svn/git.
19
OPPDATERING: Jeg bruker for øyeblikket grynt med CONCAT, nedtoner og skjemmer bidrag. Du kan bruke den med en overvåker for å få den til å lage nye minifiler i bakgrunnen når kilden endres. uglify contrib deler ikke bare konsolllogger, men fjerner også ubrukte funksjoner og egenskaper.
Jeg må oppdatere alle sidene som trenger disse 3 filene for å koble til den nylig rotfestede CSS-en.
Du nevnte ikke utviklingsmiljøet ditt. Du kan se at det er mange komprimeringsverktøy oppført for forskjellige miljøer. Og du bruker et godt verktøy, f.eks. YUI-kompressor.
6
Jeg ser ikke at du nevner et innholdsstyringssystem (Wordpress, Joomla, Drupal, etc.), men hvis du bruker et populært CMS, har de alle plugins/moduler tilgjengelig (gratis alternativer) som vil minimere og cache din css og js.
Å bruke en plugin gir deg muligheten til å holde ukomprimerte versjoner tilgjengelige for redigering, og når du gjør endringer, inkorporerer plugin automatisk endringene dine og komprimerer filen på nytt. Bare sørg for at du velger en plugin som lar deg ekskludere filer (som en tilpasset js-fil) hvis den bryter noe.
Jeg har tidligere prøvd å beholde disse filene manuelt, og det blir alltid et vedlikeholdsmareritt. Lykke til, håper dette hjalp.
3
Hvis du gjør forhåndsbehandling av filene du serverer, vil du sannsynligvis sette opp et skikkelig byggesystem (for eksempel en Makefile). På denne måten har du originalfilene uten duplisering, og hver gang du gjør endringer, kjører du "make" og oppdaterer alle de automatisk genererte filene. Hvis du allerede har installert et byggesystem, lær hvordan det fungerer og bruker det. Hvis ikke, må du legge den til.
Så, finn først ut hvordan du kombinerer og forminsker filene dine fra kommandolinjen (i YUICompressor-dokumentasjonen). Angi en katalog for automatisk generert materiale, atskilt fra materialet du jobber med, men tilgjengelig for nettserveren, og skriv ut der, for eksempel gen/scripts/combination.js. Plasser kommandoene du brukte i en Makefile og gjenta "make" hver gang du gjorde en endring og vil at den skal tre i kraft. Oppdater deretter overskriftene i de andre filene for å peke på de kombinerte filene og minifilene.
5
For folk som vil ha noe litt mer lett og fleksibelt, opprettet jeg js.sh i dag for å løse dette problemet. Det er et enkelt kommandolinjeverktøy som retter seg mot JS-filer, som enkelt kan endres for å ta vare på CSS-filer. Fordeler:
- Kan enkelt tilpasses for bruk av flere utviklere på et prosjekt
- Kombinerer JS-filer i rekkefølgen spesifisert i script_order.txt
- komprimer dem med Googles Closure Compiler
- Skiller JS inn i< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
- Oppretter en liten PHP-fil med tagger som du kan inkludere der det passer
- Bruk: js.sh -u ditt navn
Det kan trenge noen forbedringer, men det er bedre for mitt bruk enn alle de andre løsningene jeg har sett så langt.
4
Det første optimaliseringstrinnet er å minimere filer. (Jeg anbefaler på det sterkeste GULP for minifisering og optimalisering. Det er en enkel løsning for timer, installasjon og alle filer komprimeres samtidig. Støtter all CSS, JS, less, sass, etc.)
ELLER Old school-løsning:
1) Generelt, som en optimaliseringsprosess, optimalisering av nettstedets ytelse, prøv å slå sammen all CSS til én fil og komprimere filen med Compass. På denne måten vil dine flere forespørsler om statisk CSS bli erstattet med én.
2) Multiple JS-problemet, som du kan løse ved å bruke et CDN (eller Google-vertsbiblioteker), slik at forespørsler går til en annen server enn din. På denne måten venter ikke serveren på at den forrige forespørselen skal fullføres før den sender den neste.
3) Hvis du har ditt eget lokalt lagrede JavaScript, skjuler du hver fil ved å bruke Brackets "Compress JavaScript"-plugin. Det er i utgangspunktet ett klikk for å komprimere JavaSScript. Brackets er en gratis editor for CSS og JS, men kan brukes for PHP og andre språk. Det er mange plugins å velge mellom for både frontend- og tredjepartsutviklere. Generelt, "ett klikk" for å utføre alle disse (fortsatt flere) kommandoene. Btw, braketter erstattet min veldig dyre Dreamweaver ;)
3) Prøv å bruke verktøy som Sass, Compass, mindre for å minimere CSS.
Merk: Selv uten å bruke blanding eller variabler, vil CSS-en din bli komprimert (bare å bruke ren CSS og Compasss "look"-kommando vil komprimere den for deg).
Håper dette hjelper!
1
I mitt symfoniprosjekt gjør jeg noe slikt
(#layout.html.twig #) (% blokkstiler %) (% if app.environment == "prod" %) (% else %) (% endif %) (% endblock %) (# some-view.html .twig #) (% utvider "AppMainBundle::layout.html.twig" %) (% blokkstiler %) (( parent() )) (% if app.environment != "prod" %) (% else %) (%endblock%)
Når DEV-versjonen er klar for produksjon bruker jeg
Object.assign()-metoden kopierer alle tallrike egne egenskaper fra en eller flere kildeobjekter til en målobjekt. Den returnerer målobjektet.
Kilden for dette interaktive eksemplet er lagret i et GitHub-depot. Hvis du vil bidra til det interaktive eksempelprosjektet, kan du klone https://github.com/mdn/interactive-examples og sende oss en pull-forespørsel.
Syntaks Object.assign(target , ... sources) Parametere target Målobjektet - hva skal kildenes egenskaper brukes på, som returneres etter at det er endret.kilder Kildeobjektet(e) - objekter som inneholder egenskapene du vil bruke. Returverdi
Målobjektet.Beskrivelse
Egenskaper i målobjektet overskrives av egenskaper i kildene hvis de har samme nøkkel. Senere kilder"-egenskaper overskriver tidligere. Object.assign()-metoden kopierer bare tallrike og egen egenskaper fra et kildeobjekt til et målobjekt. Den bruker [] på kilden og [] på målet, så den vil påkalle gettere og settere . Derfor det tildeler
egenskaper, kontra kopiering eller definering av nye egenskaper. Dette kan gjøre det uegnet for å slå sammen nye egenskaper til en prototype hvis sammenslåingskildene inneholder gettere.
For å kopiere egenskapsdefinisjoner (inkludert deres oppregning) til prototyper, bruk Object.getOwnPropertyDescriptor() og Object.defineProperty() i stedet.
Både streng- og symbolegenskaper kopieres.
I tilfelle en feil, for eksempel hvis en egenskap ikke er skrivbar, oppstår en TypeError, og målobjektet endres hvis noen egenskaper legges til før feilen oppstår.Eksempler Kloning av et objekt const obj = ( a: 1 ); const copy = Object.assign((), obj); console.log(kopi); // ( a: 1 ) Advarsel for Deep Clone
For dyp kloning må vi bruke alternativer, fordi Object.assign() kopierer egenskapsverdier.
Hvis kildeverdien er en referanse til et objekt, kopierer den bare referanseverdien.
Sammenslåing av objekter const o1 = ( a: 1 ); const o2 = (b: 2); const o3 = (c: 3); const obj = Objekt.tilordne(o1, o2, o3); console.log(obj); // ( a: 1, b: 2, c: 3 ) console.log(o1); // ( a: 1, b: 2, c: 3 ), selve målobjektet endres. Slå sammen objekter med samme egenskaper const o1 = ( a: 1, b: 1, c: 1 ); const o2 = (b: 2, c: 2); const o3 = (c: 3); const obj = Object.assign((), o1, o2, o3); console.log(obj); // ( a: 1, b: 2, c: 3 )Egenskapene overskrives av andre objekter som har de samme egenskapene senere i parameterrekkefølgen.
Kopiering av symboltype egenskaper const o1 = ( a: 1 ); const o2 = (: 2); const obj = Object.assign((), o1, o2); console.log(obj); // ( a: 1, : 2 ) (jf. feil 1207182 på Firefox) Object.getOwnPropertySymbols(obj); // Egenskaper på prototypekjeden og ikke-oppregnede egenskaper kan ikke kopieres const obj = Object.create(( foo: 1 ), ( // foo er på objs prototypekjede. bar: ( verdi: 2 // bar er a non-enumerable property ), baz: ( verdi: 3, enumerable: true // baz er en egen enumerable property. ) ) ); 3 ) Primitiver vil bli pakket til objekter const v1 = "abc"; const v4 = const obj = Object.assign(()) , v1, null, v2, undefined, v3, v4; vil bli pakket inn, null og udefinert vil bli ignorert // Merk at bare strengpakker kan ha egne enumerable egenskaper console.log(obj ( "0": "a", "1": "b", "2"); : "c" ) Unntak vil avbryte den pågående kopieringsoppgaven const target = Object.defineProperty((), "foo", ( verdi: 1 , skrivbar: false )); assign(target, ( bar: 2), ( foo2: 3, foo: 3, foo3: 3), ( baz: 4 )) ; // TypeError: "foo" er skrivebeskyttet // Unntaket blir kastet ved tildeling target.foo console.log(target.bar); // 2, den første kilden ble kopiert. console.log(target.foo2); // 3, den første egenskapen til den andre kilden ble kopiert. console.log(target.foo); // 1, unntak er kastet her. console.log(target.foo3); // udefinert, tilordningsmetoden er fullført, foo3 vil ikke bli kopiert. console.log(target.baz); // udefinert, den tredje kilden vil heller ikke bli kopiert. Kopiering av accessorer const obj = ( foo: 1, get bar() ( return 2; ) ); la kopi = Object.assign((), obj); console.log(kopi); // ( foo: 1, takt: 2 ) // Verdien av copy.bar er obj.bars getters returverdi. // Dette er en tilordningsfunksjon som kopierer hele beskrivelsesfunksjonen completeAssign(target, ...sources) ( sources.forEach(source => ( let descriptors = Object.keys(source).reduce((descriptors, key) => ( descriptors = Object.getOwnPropertyDescriptor(kilde, nøkkel), ()); // Som standard kopierer Object. .getOwnPropertyDescriptor(kilde, sym if (descriptor.enumerable) (descriptors = descriptor; )); console.log(kopi); // ( foo:1, get bar() ( return 2 ) ) PolyfillDenne polyfillen støtter ikke symbolegenskaper, siden ES5 ikke har symboler uansett:
If (typeof Object.assign !== "function") ( // Må være skrivbar: true, enumerable: false, configurable: true Object.defineProperty(Object, "assign", ( verdi: function assign(target, varArgs) ( // .length of function is 2 "use strict"; if (target === null || target === undefined) ( throw new TypeError("Kan ikke konvertere udefinert eller null til objekt"); ) var to = Object( mål); for (var indeks = 1; indeks< arguments.length; index++) { var nextSource = arguments; if (nextSource !== null && nextSource !== undefined) { for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to = nextSource; } } } } return to; }, writable: true, configurable: true }); }
Spesifikasjoner| ECMAScript siste utkast (ECMA-262) Definisjonen av "Object.assign" i den spesifikasjonen. |
Kompatibilitetstabellen på denne siden er generert fra strukturerte data. Hvis du ønsker å bidra til dataene, vennligst sjekk ut https://github.com/mdn/browser-compat-data og send oss en pull-forespørsel.
Oppdater kompatibilitetsdata på GitHub
| Desktop Mobile Server | ||||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webvisning Chrome for Android Firefox for Android Opera for Android Safari på iOS Samsung Internet Node.js | ||||||||||||
| Chrome Full støtte 45 | Edge Full støtte 12 | Firefox Full støtte 34 | IE Ingen støtte nr | Opera Full støtte 32 | Safari Full støtte 9 | WebView Android Full støtte 45 | Chrome Android Full støtte 45 | Firefox Android Full støtte 34 | Opera Android Full støtte 32 | Safari iOS Full støtte 9 | Samsung Internet Android Full støtte 5.0 | nodejs Full støtte 4.0.0 |