"কোড জেনারেটরটি" কিছু ফাইলের স্টাইলিংটিকে "100KB" "সর্বাধিক ছাড়িয়ে যাওয়ার সাথে সাথে ডিপ্টিভাইজ করেছে?

Question

আমি আমার প্রকল্পে একটি নতুন এনপিএম প্যাকেজ যুক্ত করেছি এবং এটি আমার মডিউলগুলির একটিতে প্রয়োজনীয় require

এখন আমি এই বার্তাটি ওয়েবপ্যাক থেকে পেয়েছি,

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

আপনি কি কোথাও আপনার ওয়েবপ্যাক কনফিগারেশন রাখতে পারেন? প্রশ্নে এনপিএম প্যাকেজটি কী?

— জুহো ভেস্পসালিনেন

জোহান, আপনি যে উত্তরটি সমাধান করেছেন সেটিকে অবশ্যই মেনে নেওয়ার বিষয়টি নিশ্চিত করুন

— ডানা উডম্যান

Answer 1

এটি compactবাবেল সংকলকের বিকল্পের সাথে সম্পর্কিত , যা "অতিরিক্ত অতিরিক্ত সাদা বর্ণের অক্ষর এবং লাইন টার্মিনেটরকে অন্তর্ভুক্ত না করার নির্দেশ দেয় When 'অটো' কম্প্যাক্টে সেট করা হলে> 100 কেবি ইনপুট আকারে সত্য সেট করা হয়।" ডিফল্টরূপে এর মান হ'ল "অটো", সুতরাং সম্ভবত কারণেই আপনি সতর্কতা বার্তা পেয়ে যাচ্ছেন। বাবেল ডকুমেন্টেশন দেখুন ।

আপনি কোয়েরি প্যারামিটার ব্যবহার করে ওয়েবপ্যাক থেকে এই বিকল্পটি পরিবর্তন করতে পারেন । উদাহরণ স্বরূপ:

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

Comments

এবং আপনার যদি একাধিক লোডার থাকে তবে আপনি প্যারামিটারের ?compact=falseপরিবর্তে ব্যবহার করতে পারেন query। উদাহরণস্বরূপ:{test: /\.js$/, loaders: ['ng-annotate', 'babel?compact=false']}

— keেন্ডnyder

এছাড়াও আমরা Webpack.config.js ফাইলটিকে পরিষ্কার করার জন্য .babelrc ফাইলটিতে বিকল্প যুক্ত করতে পারি, যেমন b "কমপ্যাক্ট": সত্য} .babelrc ফাইলটিতে যুক্ত করতে।

— রন

@ রিকার্ডো স্টুভেন কিন্তু আমি কেন এটি মিথ্যাতে পরিবর্তন করব? "অতিরিক্ত অতিরিক্ত সাদা বর্ণের অক্ষর এবং লাইন টার্মিনেটরগুলি অন্তর্ভুক্ত না করা"

— মতামত

@ বেন এতক্ষণে আমরা বিকাশকালেই মিথ্যা হয়ে যাব?

— omriman12

@ omriman12 আপনি কীভাবে আউটপুটটি ব্যবহার করতে যাচ্ছেন তার উপর এটি নির্ভর করে। যদি এটি এমন একটি প্রোডাকশন বিল্ড যা মাইনাইফাই হতে চলেছে, তবে এই পরামিতিটি সেট করার কোনও মূল্য নেই false। আমার মতো ক্ষেত্রে যেখানে আউটপুটটির ফর্ম্যাট গুরুত্বপূর্ণ, এর মান রয়েছে। বেশিরভাগ জিনিসের মতো এটি নির্ভর করে। :)

— বেন

Answer 2

এটি বাবেল ত্রুটি বলে মনে হচ্ছে । আমি অনুমান করছি আপনি ব্যাবেল-লোডার ব্যবহার করেন এবং আপনার লোডার পরীক্ষা থেকে বাহ্যিক গ্রন্থাগারগুলি বাদ দিচ্ছেন না। আমি যতদূর বলতে পারি, বার্তাটি ক্ষতিকারক নয়, তবে আপনার এখনও এই জাতীয় কিছু করা উচিত:

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

একবার দেখুন। এটা কি?

Comments

অদ্ভুত, আমি একই বার্তাটি দেখি (রামদার জন্যও), যদিও আমি করি exclude: /node_modules/।

— রোমান পোমিনভ

একই পথ? হতে পারে আপনার বাহ্যিক গ্রন্থাগারটি অন্য কোথাও অবস্থিত? যদি তা না হয় তবে আপনি রিকার্ডোর সমাধানও চেষ্টা করতে পারেন। এই সমস্যাটি খুব সমালোচনামূলক নয়।

— mallvens

আমার খারাপ। আমি ভুল কনফিগার চেক করছিলাম। আসলটির কাছে ছিল না exclude।

— রোমান পোমিনোভ

আমি এই উত্তরটি আরও ভাল পেয়েছি। ধন্যবাদ @ মেলভেনস

— মোসিয়া থাবো

Answer 3

নীচের তিনটি বিকল্পের যে কোনও একটি বার্তা থেকে মুক্তি পেয়েছে (তবে বিভিন্ন কারণে এবং আমার মনে হয় বিভিন্ন পার্শ্ব-প্রতিক্রিয়া সহ):

1. node_modulesডিরেক্টরিটি বাদ দিন বা স্পষ্টভাবে includeআপনার অ্যাপ্লিকেশনটি যে ডিরেক্টরিটি থাকে সে ডিরেক্টরিটি বাদ দিন (যা সম্ভবত ১০০ কেবি-র বেশি পরিমাণে ফাইল ধারণ করে না)
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এবং এটি সমস্যার সমাধান করেছে।

— phil_lgr

এটি অনুসন্ধানে এসেছিল :)

— সংবাদদাতাদের

ধন্যবাদ, আমার ঠিক একই জিনিস ছিল

— হেনকি 85

Answer 5

আরও বিশদে পড়ার জন্য THIS LINK, অতিরিক্ত ব্যবহারের সাদা অংশের অক্ষর এবং লাইন টার্মিনেটর অন্তর্ভুক্ত না করাBabel compiler এই আদেশগুলির বিকল্প । কিছু সময় আগে এর প্রান্তিক ছিল 100KBকিন্তু এখন হয় 500KB।

আমি আপনাকে এই .babelrcফাইলটি এই কোড সহ আপনার বিকাশের পরিবেশে এই বিকল্পটি অক্ষম করব ।

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

উত্পাদন পরিবেশের Babelজন্য ডিফল্ট কনফিগারেশন ব্যবহার করুন auto।

Answer 6

প্রতিক্রিয়া / রিডেক্স / ওয়েবপ্যাক / ব্যাবেল বিল্ডে স্ক্রিপ্ট ট্যাগের প্রকারের পাঠ্য / বাবেলকে সরিয়ে এই ত্রুটিটি ঠিক করেছে

ত্রুটি পেয়েছে:

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

কোনও ত্রুটি নেই:

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

Answer 7

একাধিক মডিউল নিয়মের সাথে ওয়েবপ্যাক 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

এটি সম্ভবত আসল ওপি প্রশ্নের ক্ষেত্রে নয়, তবে: আপনি যদি ডিফল্ট সর্বাধিক আকারটি ছাড়িয়ে যান তবে এটি হয়ত আপনার অন্য কোনও সমস্যার লক্ষণ। আমার ক্ষেত্রে, আমি সতর্কতা পেয়েছিলাম, তবে শেষ পর্যন্ত এটি একটি চূড়ান্ত ত্রুটিতে পরিণত হয়েছিল: মার্ক কমপ্যাক্ট সংগ্রাহক: আধা-স্থান অনুলিপি, পুরানো জেনার ফলব্যাক ব্যর্থ হয়েছে - জাভাস্ক্রিপ্টের হিপ স্মৃতি থেকে সরে গেছে। কারণটি ছিল যে আমি গতিশীলভাবে বর্তমান মডিউলটি আমদানি করেছি , সুতরাং এটি একটি অন্তহীন লুপ দিয়ে শেষ হয়েছিল ...

Comments

এটি আমার জন্য একটি লক্ষণ ছিল - আমি চেষ্টা করেছি এবং এটি ট্র্যাক করার জন্য আমার আমদানিগুলি সরিয়ে / যুক্ত করতে শুরু করেছি। আপত্তিজনক স্ক্রিপ্টটি একটি গতিশীল প্রয়োজন ( require('../../../' + a + '/' + b)) ব্যবহার করছিল । এটি সরানো সমস্যার সমাধান করেছে (এবং এটি আর ফিরে আসবে না)।

— ফ্রাঙ্ক

কেন এটিকে নিম্নমানের করা হয়েছিল তা নিশ্চিত নয়, এটি হ'ল আমার সমস্যা। ধন্যবাদ শমুয়েল!

— অ্যারন