क्या करता है "कोड जनरेटर ने [कुछ फ़ाइल] की स्टाइलिंग को समाप्त कर दिया है क्योंकि यह" 100KB "की अधिकतम सीमा से अधिक है?

Question

मैंने अपनी परियोजना में एक नया एनपीएम पैकेज जोड़ा और अपने एक मॉड्यूल में इसकी आवश्यकता है।

अब मुझे यह संदेश वेबपैक से मिला,

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

इसका क्या मतलब है? क्या मुझे कुछ कार्रवाई करने की आवश्यकता है?

Comments

क्या आप अपना वेबपैक कॉन्फ़िगरेशन कहीं रख सकते हैं? प्रश्न में NPM पैकेज क्या है?

— जुहो वेपसैलीन

जोहान, आपके लिए इसका समाधान करने वाले उत्तर को स्वीकार करना सुनिश्चित करें

— Dana Woodman

Answer 1

यह compactबैबेल कंपाइलर के विकल्प से संबंधित है , जो "सुपरफ़्लस व्हॉट्सएप वर्ण और लाइन टर्मिनेटर को शामिल नहीं करने के लिए " आदेश देता है । जब 'ऑटो' कॉम्पैक्ट पर सेट किया जाता है, तो> 100KB के इनपुट आकारों पर सही होता है। " डिफ़ॉल्ट रूप से इसका मूल्य "ऑटो" है, इसलिए संभवतः यही कारण है कि आपको चेतावनी संदेश मिल रहा है। बाबेल प्रलेखन देखें ।

आप क्वेरी पैरामीटर का उपयोग करके वेबपैक से इस विकल्प को बदल सकते हैं । उदाहरण के लिए:

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]

Comments

और यदि आपके पास कई लोडर हैं, तो आप पैरामीटर के ?compact=falseबजाय उपयोग कर सकते हैं query। उदाहरण के लिए:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}

— kendnyder

भी हम वेब पैक बनाने के लिए .babelrc फ़ाइल में विकल्प जोड़ सकते हैं। फ़ाइल को साफ करें, जैसे .babelrc फ़ाइल में {"कॉम्पैक्ट": सत्य} जोड़ें।

— रॉन

@ रिकार्डो स्टुवन लेकिन मैं इसे झूठ में क्यों बदलूंगा? एक सकारात्मक बात की तरह लगता है "

— सुपरफ्लस व्हाट्सएप

@ तो क्या मूल रूप से हम केवल विकास करते समय असत्य पर सेट होंगे?

— omriman12

@ omriman12 यह इस बात पर निर्भर करता है कि आप आउटपुट का उपयोग कैसे करने जा रहे हैं। यदि यह एक उत्पादन निर्माण है, जिसे छोटा किया जा रहा है, तो इस पैरामीटर को सेट करने में कोई मूल्य नहीं है false। मेरे जैसे मामलों के लिए जहां आउटपुट का प्रारूप महत्वपूर्ण है, जिसका मूल्य है। ज्यादातर चीजों की तरह, यह निर्भर करता है। :)

— बेन

Answer 2

यह एक कोलाहल त्रुटि प्रतीत होती है । मुझे लगता है कि आप बेबल-लोडर का उपयोग कर रहे हैं, और आपके लोडर परीक्षण से बाहरी पुस्तकालयों को बाहर नहीं कर रहे हैं। जहां तक ​​मैं बता सकता हूं, संदेश हानिकारक नहीं है, लेकिन आपको अभी भी कुछ ऐसा करना चाहिए:

loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]

एक नज़र देख लो। क्या वह था?

Comments

अजीब, मैं एक ही संदेश देखता हूं (रम्दा के लिए भी), हालांकि मैं करता हूं exclude: /node_modules/।

— रोमन पोमोनोव

एक ही रास्ता, भी? हो सकता है कि आपका बाहरी पुस्तकालय कहीं और स्थित हो? यदि नहीं, तो आप रिकार्डो के समाधान को भी आजमा सकते हैं। यह समस्या बहुत गंभीर नहीं है।

— मेल्वेंस

मेरी गलती। मैं गलत कॉन्फ़िगरेशन की जाँच कर रहा था। वास्तविक एक नहीं था exclude।

— रोमन पोमोनोव

मुझे यह उत्तर बेहतर लगा। धन्यवाद @ म्हल्वेंस

— मोसिया थाबो

Answer 3

या तो नीचे दिए गए तीन विकल्पों में से एक को संदेश से छुटकारा मिल जाता है (लेकिन विभिन्न कारणों से और अलग-अलग दुष्प्रभावों के साथ मुझे लगता है):

1. node_modulesनिर्देशिका को छोड़ दें या स्पष्ट रूप से includeवह निर्देशिका जहाँ आपका ऐप रहता है (जिसमें संभवतः 100KB से अधिक की फाइलें नहीं हैं)
2. सेट कोलाहल विकल्प compact के लिए true(वास्तव में किसी भी "ऑटो" के अलावा अन्य मूल्य)
3. कोलाहल विकल्प सेट compactकरने के लिए false(ऊपर देखें)

उपरोक्त सूची में # 1 node_modulesनिर्देशिका को छोड़कर या तो स्पष्ट रूप से उस निर्देशिका को शामिल किया जा सकता है, जहां आपका ऐप रहता है।

जैसे webpack.config.js:

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

... या include: path.resolve(__dirname, 'app/')(फिर से webpack.config.js) का उपयोग करके ।

उपरोक्त सूची में # 2 और # 3 इस उत्तर में सुझाई गई विधि या (मेरी वरीयता) .babelrcफ़ाइल को संपादित करके पूरा किया जा सकता है । उदाहरण के लिए:

$ cat .babelrc 
{
    "presets": ["es2015", "react"],
    "compact" : true
}

निम्नलिखित सेटअप के साथ परीक्षण किया गया:

$ npm ls --depth 0 | grep babel
├── babel-core@6.7.4
├── babel-loader@6.2.4
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0

Answer 4

मैंने रिकार्डो स्टुवेन के रास्ते की कोशिश की, लेकिन यह मेरे लिए काम नहीं किया। अंत में काम किया "कॉम्पैक्ट" जोड़ रहा था: मेरे .babelrc फ़ाइल के लिए गलत:

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}

Comments

बेबेल 6.5.x, वेबपैक 2 का उपयोग करना, मेरे पास एक ही संदेश था, लेकिन इसके लिए lodash.js, और इसने इस मुद्दे को ठीक कर दिया।

— फिल्लौर

इस की तलाश में आया :)

— मुखबिर

धन्यवाद, मेरे पास एक ही बात थी

— हेनकी85

Answer 5

अधिक विवरण पढ़ने के लिए THIS LINK, यह Babel compilerउस आदेश का विकल्प है जिसमें शानदार व्हाट्सएप वर्ण और लाइन टर्मिनेटर शामिल नहीं हैं। कुछ समय पहले इसकी दहलीज थी 100KBलेकिन अब है 500KB।

मैं आपको इस कोड में .babelrcफ़ाइल के साथ अपने विकास के माहौल में इस विकल्प को निष्क्रिय करने का अधिकार देता हूं ।

{
    "env": {
      "development" : {
        "compact": false
      }
    }
}

उत्पादन वातावरण के Babelलिए डिफ़ॉल्ट कॉन्फिग का उपयोग करें जो है auto।

Answer 6

प्रतिक्रिया / redux / webpack / babel में स्क्रिप्ट टैग प्रकार टेक्स्ट / बैबेल को हटाकर इस त्रुटि को ठीक करें

त्रुटि मिली:

<script type="text/babel" src="/js/bundle.js"></script>

कोई ग़लती नहीं:

<script src="/js/bundle.js"></script>

Answer 7

webpack 4 में कई मॉड्यूल नियमों के साथ आप अपने .js नियम में ऐसा कुछ करेंगे:

{
     test: /\.(js)$/,
     loader: 'babel-loader',
     options: {
          presets: ['es2015'],    // or whatever
          plugins: [require('babel-plugin-transform-class-properties')], // or whatever
          compact: true    // or false during development
     }
},

Answer 8

यह शायद मूल ओपी प्रश्न का मामला नहीं है, लेकिन: यदि आप डिफ़ॉल्ट अधिकतम आकार से अधिक है, तो यह आपके पास किसी अन्य मुद्दे का एक लक्षण हो सकता है। मेरे मामले में, मेरे पास युद्ध था, लेकिन आखिरकार यह एक वास्तविक त्रुटि में बदल गया: MarkCompactCollector: अर्ध-अंतरिक्ष प्रतिलिपि, पुराने जीन आवंटन में गिरावट विफल रही - जावास्क्रिप्ट मेमोरी से बाहर ढेर। कारण यह था कि मैंने गतिशील रूप से वर्तमान मॉड्यूल को आयात किया था , इसलिए यह एक अंतहीन लूप के साथ समाप्त हो गया ...

Comments

यह मेरे लिए एक लक्षण था - मैंने अपने आयात को हटाने और इसे नीचे ट्रैक करने के लिए जोड़ना / जोड़ना शुरू कर दिया। अपमानजनक स्क्रिप्ट एक गतिशील आवश्यकता ( require('../../../' + a + '/' + b)) का उपयोग कर रहा था । इसे हटाने से समस्या हल हो गई (और यह कभी वापस नहीं आएगी)।

— फ्रैंक

यकीन नहीं हो रहा था कि यह अस्वीकृत क्यों हुआ, यह वास्तव में मेरा मुद्दा था। धन्यवाद शमूएल!

— एरॉन