في هذه المقالة ، أود أن أشارك تجربتي في تقسيم الحزم لموقع متعدد الصفحات باستخدام Webpack 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 ، قمت بوضع نصوص مشتركة لجميع الصفحات. لتوصيل حزمنا بالصفحات ، سوف نستخدم Webpack plugin HtmlWebpackPlugin .
النظر في مثال:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: `${PATHS.dist}/index.html`, template: `${PATHS.dist}/index.html`, chunks: ["index", "common"] }) ... ] ... };
في مجموعات chunks الحزم اللازمة لهذه الصفحة (الترتيب: من اليمين إلى اليسار). وبالتالي ، سيتم توصيل البرامج النصية الأولى بالصفحة ، ثم البرامج النصية اللازمة بشكل منفصل لهذه الصفحة.
إذا كان لدينا وحدات مشتركة / مكتبات تابعة لجهات خارجية متصلة على صفحات مختلفة ، فسننشئ حزم مشتركة لهذه الصفحات.
سوف نستخدم Webpack المساعد SplitChunksPlugin . في الواقع ، هنا هو التكوين:
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 .
يمكن تغيير أسماء المقاطع في تهيئة هذا البرنامج المساعد.
لتوصيل هذه الحزم بشكل صحيح بكل صفحة من صفحاتنا ، سنستخدم 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>