वेबपैक स्प्लिटसक्लिप्सप्लगिन के साथ स्क्रिप्ट ऑप्टिमाइज़ेशन

इस लेख में, मैं वेबपैक 4 का उपयोग करते हुए एक बहु-पृष्ठ साइट के लिए बंडलों को विभाजित करने में अपना अनुभव साझा करना चाहता हूं। सबसे पहले, प्रत्येक पृष्ठ के लिए एक प्रविष्टि बिंदु बनाएं। एक उदाहरण के रूप में 4 पृष्ठों पर विचार करें:

const path = require("path"); const PATHS = { src: path.resolve(process.cwd(), "src"), dist: path.resolve(process.cwd(), "dist") }; module.exports = { entry: { common: `${PATHS.src}/js/common`, index: `${PATHS.src}/js/index`, contacts: `${PATHS.src}/js/contacts`, about: `${PATHS.src}/js/about`, } } 

विधानसभा के दौरान, प्रत्येक पृष्ठ के लिए एक बंडल बनाया जाएगा। common प्रविष्टि बिंदु में, मैं सभी पृष्ठों के लिए सामान्य स्क्रिप्ट बाहर रखता हूं। हमारे बंडलों को पृष्ठों से जोड़ने के लिए, हम वेबपैक प्लगइन HtmlWebpackPlugin का उपयोग करते हैं।

एक उदाहरण पर विचार करें:

  module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... }; 

chunks इस पृष्ठ के लिए आवश्यक बंडलों को निर्दिष्ट करते हैं (क्रम: दाएं से बाएं)। इस प्रकार, पहले स्क्रिप्ट पेज से जुड़ी होंगी, और फिर इस पेज के लिए अलग से स्क्रिप्ट की जरूरत होगी।

यदि हमारे पास अलग-अलग पृष्ठों पर जुड़े सामान्य मॉड्यूल / तृतीय-पक्ष लाइब्रेरी हैं, तो हम इन पृष्ठों के लिए सामान्य बंडल बनाएंगे।

हम वेबपैक स्प्लिटसहक्सप्लगिन का उपयोग करेंगे। दरअसल, यहाँ विन्यास है:

 module.exports = { optimization: { splitChunks: { chunks: "all", minSize: 1, minChunks: 2 } } } 

असेंबली के बाद, हम प्रत्येक पृष्ठ के लिए अलग-अलग बंडल प्राप्त करेंगे और हमारे पेज साझा करने वाले बंडल।

 index.js contacts.js common.js about.js vendors~about-us~index.js vendors~about-us~contacts.js 

विक्रेताओं ~ about-us ~ index.js बंडल में लगभग- about-us और index लिए सामान्य स्क्रिप्ट होंगी, जो ब्राउज़र द्वारा कैश की जाती हैं, और जब आप index पेज से स्विच about वे पहले से ही ब्राउज़र द्वारा डाउनलोड हो जाएंगे, और आपको केवल about.js बंडल डाउनलोड करना about.js ।

इस प्लगइन के कॉन्फिग में चंक नामों को बदला जा सकता है।

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

 npm i --save-dev html-webpack-plugin@next 

असेंबली के बाद, हमें index.html में निम्न कोड मिलता है:

 <script src="js/common.js"></script> <script src="js/vendors~about-us~index.js"></script> <script src="js/index.js"></script>