मेरे पास एक बड़ा बंडल है जिसे 2MB PWA प्रतिबंध से नीचे लाने के लिए कई हिस्सों में विभाजित करने की आवश्यकता है। BundleAnalyzerPlugin से मैं देख सकता हूं कि मुझे लॉश, फॉन्टवॉसम और मोमेंट को अलग-अलग विखंडू/बंडल फाइलों में विभाजित करने से फायदा होगा।
BundleAnalyzerPlugin

मैंने आयात() विभाजन तकनीक यहां वर्णित का उपयोग करने का प्रयास किया है, लेकिन देख नहीं सकता इसे Fontawesome के लिए कैसे काम करें।

नीचे दिया गया उदाहरण काम नहीं करता है, क्योंकि यह अभी भी बंडल में बहुत बढ़िया छोड़ देता है और इंटरैक्ट करने पर केवल आइकन लोड करता है।

import { faBell, faEyeSlash, faEye} from '@fortawesome/free-solid-svg-icons';
import { faBell as regularBell} from '@fortawesome/free-regular-svg-icons';
import('@fortawesome/fontawesome-svg-core').then(fontawesome => {
  fontawesome.library.add(
    faBell, faEye, faEyeSlash, regularBell
  )
})

लॉश, फॉन्टावेसम और मोमेंट जैसे पैकेजों को अलग-अलग बंडलों में अलग करने की सही तकनीक क्या है?

सादर /K

-1
Kermit 1 फरवरी 2020, 14:18

2 जवाब

सबसे बढ़िया उत्तर

मुझे नहीं पता कि आप वास्तव में किसके साथ आने की कोशिश कर रहे हैं, लेकिन मुझे लगता है कि आप कम बंडल आकार चाहते हैं तो मैंने आपके लिए एक शोध किया:

यदि आप वास्तव में अपने बंडल आकार को सबसे कम करना चाहते हैं तो gzip संपीड़न देखें

https://webpack.js.org/plugins/compression-webpack-plugin/

थोड़ा सा शोध आपको इस ओर ले जाएगा: https://webpack.js.org/guides/code-splitting/

लॉश, फॉन्टावेसम और मोमेंट जैसे पैकेजों को अलग-अलग बंडलों में अलग करने की सही तकनीक क्या है?

लॉश के लिए:

// You should be using:
import isEmpty from 'lodash/isEmpty'

// instead of:
import _ from 'lodash';
import { isEmpty } from 'lodash';

पढ़ें: https://www .blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark/

एक पल के लिए: https://medium.com/@ मेमिजा/कम-इज़-मोर-विद-मोमेंट-एंड-मोमेंट-टाइमज़ोन-d7afbab34df3

Fontawesome के लिए: मुझे नहीं पता कि यह वास्तव में है?

नीचे दिया गया उदाहरण काम नहीं करता है, क्योंकि यह अभी भी बंडल में बहुत बढ़िया छोड़ देता है और इंटरैक्ट करने पर केवल आइकन लोड करता है।

हां, आपने अपने कॉन्फिग में जो कहा है, उसके आधार पर इसे निश्चित रूप से बंडल में शामिल किया जाएगा? आपने जो किया वह डॉक्स से ही है: https://fontawesome.com/how-to- उपयोग/साथ-द-एपीआई/अन्य/पेड़-हिलाने

1
crrmacarse 1 फरवरी 2020, 15:22

वेबपैक में फॉन्ट-भयानक प्रतिक्रिया पैकेज के साथ काम करने के लिए ट्री-शेकिंग के लिए, मुझे सबफ़ोल्डर से सीधे इस तरह से आइकन आयात करने की आवश्यकता थी:

import { faBell } from '@fortawesome/free-solid-svg-icons/faBell';
import { faEyeSlash } from '@fortawesome/free-solid-svg-icons/faEyeSlash';
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
import { faBell as regularBell } from '@fortawesome/free-regular-svg-icons/faBell';

मैं वेबपैक v4 और fontawesome v5 पर हूं।

1
Hinrich 16 मार्च 2021, 13:32