ग्लोब फ़ाइल

const entryArray = glob.sync('src/**/*.js');
const entryObject = entryArray.reduce((acc, item) => {
  const name = item
  acc[name] = "./"+item;
  return acc;
}, {});

वेबपैक कॉन्फिग

const browserConfig = {
  entry: entryObject,

  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name]",
    publicPath: "/"
  },
}

{ 'src/App.js': './src/App.js', 'src/App.test.js': './src/App.test.js', 'src/index.js': './src/index.js',
'src/page/About.js': './src/page/About.js', 'src/page/Home.js': './src/page/Home.js', 'src/serviceWorker.js': './src/serviceWorker.js', 'src/setupTests.js': './src/setupTests.js' }

मैं बिल्ड फ़ोल्डर में कई फाइलें प्राप्त करने में सक्षम हूं। लेकिन समस्या यह है कि Home.js की सामग्री index.js और App.js में पाई जाती है। चूंकि सभी फ़ाइलें आयात के माध्यम से अनुक्रमणिका से जुड़ी होती हैं और पृष्ठों की सभी फ़ाइलें App.js से लिंक होती हैं।

मैं चाहता हूं कि मुझे डुप्लिकेट कॉपी नहीं चाहिए, लेकिन सभी बंडल आयात के माध्यम से एक दूसरे से जुड़े हुए हैं। हो सकता है कि आप इसे कोड विभाजन कह सकते हैं।

1
Biswajit 20 अप्रैल 2020, 09:10

2 जवाब

SplitChunksPlugin कोड डुप्लीकेशन में मदद कर सकता है

module.exports = {
    ...
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'build'),
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
      },
    },
  };

और आप गतिशील आयात और पुस्तकालयों को जोड़ने के लिए नीचे दिए गए दृष्टिकोण का उपयोग कर सकते हैं

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      publicPath: 'build/',
      path: path.resolve(__dirname, 'build'),
    }
  };

लेकिन इसमें रिएक्ट के लिए आवश्यक बहुत ही बुनियादी सर्वोत्तम प्रथाओं का अभाव है। मेरा सुझाव है कि आप यह जैसे सरल ट्यूटोरियल देखें।

1
Derviş Kayımbaşıoğlu 26 अप्रैल 2020, 22:40

ग्लोब फ़ाइल

const entryArray = glob.sync('src/**/*.js');
const entryObject = entryArray.reduce((acc, item) => {
  const name = item
  acc[name] = "./"+item;
  return acc;
}, {});

वेबपैक कॉन्फिग

const browserConfig = {
  entry: entryObject,

  output: {
    path: path.resolve(__dirname, "build"),
    filename: "[name]",
    publicPath: "/"
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
}

यह वह संरचना रखेगा जो आप चाहते हैं, और डुप्लिकेट डेटा नहीं होगा। इसके बजाय यह एक और फाइल बनाएगा जिसे कई फाइलों के बीच आंतरिक रूप से साझा किया जाएगा। इस तरह आप कोड दोहराव से बच सकते हैं और साथ ही यह सुनिश्चित कर सकते हैं कि आपके बंडल तेजी से लोड हों। आपकी किसी भी फ़ाइल द्वारा साझा फ़ाइल लोड होने के बाद बोनस, अगली बार साझा फ़ाइल पर निर्भर एक और बंडल ब्राउज़र कैश्ड फ़ाइल का उपयोग करेगा। यह आपके कोड को बंडल आकार और नेटवर्क पर भी सुपर कुशल बनाता है।

और हाँ, यह nextjs में संभव है।

2
Ayushya 2 मई 2020, 00:55
अब काम नहीं कर रहा! ऐसा लगता है कि मुझे गतिशील आयात का उपयोग करना होगा अन्यथा मुझे इसे प्राप्त करने के लिए एक वेबपैक प्लगइन बनाना होगा।
 – 
Biswajit
2 मई 2020, 08:35