Ho un progetto in Angular1.x utilizzando molti file SVG.
Non ho idea di cosa fare ai file SVG per prepararli alla produzione.
Non voglio che la mia pagina invochi 50 chiamate a diversi file SVG. Quindi quali sono le mie opzioni e quali strumenti devo realizzare?
Uso gli script npm per creare il mio progetto.
Gestisci i file SVG nello stesso modo in cui gestiresti altre risorse web:
Nel processo di compilazione, ottimizza ("riduci") i file in modo da non consumare inutilmente spazio o larghezza di banda. Strumenti come svgo fanno questo trucco. E ci sono già facili integrazioni in molte catene di build, come ad esempio gulp.
Memorizzali, se possibile, su una rete di distribuzione dei contenuti in modo che i client che richiedono questi file colpiscano un grande , rete scalabile e risorsa di archiviazione, non il tuo server. C'è un costo per questo, ma generalmente molto più basso che serve tutte le richieste HTTP GET dal tuo server web principale. (Questo passaggio è altamente raccomandato per tutte le immagini e altre risorse statiche e spesso porta a notevoli miglioramenti della latenza del carico del sito e della scalabilità del sito.)
Puoi considerare di raggrupparli, incorporati all'interno di file HTML o in un file di dati come una risorsa JSON. Non esiste, tuttavia, una strategia di raggruppamento "one size fits all". Dipende dalla dimensione dei file e dal modo in cui vengono utilizzati. Le strategie di incorporamento / raggruppamento di solito non sono un passaggio trasparente e banale. Infine, se si minimizzano e CDN-offload le risorse, la necessità di raggruppamento è generalmente molto ridotta. Se decidi che il raggruppamento è la strada da percorrere, controlla il sistema di imballaggio di produzione esistente. Strumenti come webpack spesso supportano specifiche opzioni di raggruppamento, come URI di dati .
Infine, considera il bundle SVG come un raffinamento, da gestire dopo che altri problemi relativi al processo di costruzione e al packaging sono stati risolti e ordinati. Il tuo sito può funzionare perfettamente con molte richieste di immagini e ci sono modi semplici per ottimizzare le richieste di immagine (ad esempio l'offload CDN). Le problematiche relative al resto della pipeline di costruzione IME rendono nulli i problemi associati a SVG di per sé. Metti in funzione il tuo cavallo e il tuo passeggino prima di preoccuparti di come è stato sistemato il passeggino.
Leggi altre domande sui tag angularjs svg build-system minify