الكاتب | ديفيد جلبرتسون

المترجم | الجهل

مصدر شو قمة الأمامية

كيف يمكن لموقع ويب الذي يرسل ملف مورد للمستخدم في أفضل وسيلة؟ هناك العديد من السيناريوهات المختلفة، وتقنيات مختلفة وشروط مختلفة. في هذا المقال، أود أن أخبركم: ما هي استراتيجية تجزئة الملف هو أفضل لموقع ومستخدمين، وكيفية تنفيذها.

المسرد Webpack، هناك نوعان من أنواع مختلفة من تقسيم وثيقة. يبدو أنها قابلة للتبديل، ولكن على ما يبدو لا:

• المجمعة سبليت: إنشاء أكثر من ذلك، ملفات أصغر (ولكن سيكون على كل طلب تحتاج إلى تحميلها) للحصول على تأثير وقائي أفضل.
• كود الانقسام: كود تحميل حيوي، للمستخدمين تحميل فقط المحتوى رمز المطلوبة كانوا يشاهدون.

ويبدو أن الطريقة الثانية أكثر جاذبية، أليس كذلك؟ في الواقع، هناك العديد من المقالات ويبدو أن نفترض أن هذا هو لتقسيم ملف جافا سكريبت فقط البرنامج القيم. ولكن أريد أن أقول لك هو أنه، بالنسبة لكثير من المواقع على شبكة الإنترنت، والأسلوب الأول هو أكثر قيمة، وأنه ينبغي أن يكون الاعتبار الأول.

المجمعة سبليت

الفكرة وراء حزمة انقسام بسيطة جدا. إذا كان لديك ملف كبير، حتى لو كان فقط تعديل سطر واحد من التعليمات البرمجية، يجب على المستخدم تحميل الملف بأكمله مرة أخرى. ومع ذلك، إذا كنت تقسيمه إلى ملفين، لذلك يحتاج المستخدمون فقط إلى تحميل ملف يتم تعديل، فإن متصفح الحصول على ملف آخر من ذاكرة التخزين المؤقت.

المجمعة مخبأ الانقسام، وبالتالي للمستخدم مرة الأولى للموقع، ليس هناك انقسام في واقع الأمر لا يختلف.

للمستخدمين الذين يترددون على الموقع لقياس تحسينات في الأداء الناتجة عن تجميع الانقسام قد يكون من الصعب جدا، ولكن علينا أن نفعل ذلك!

أحتاج جدول لبيانات الأداء القياسية. ما يلي هو المشهد المذكور أعلاه:

• أليس مرة واحدة في الأسبوع لزيارة موقعنا على شبكة الإنترنت، لمدة 10 أسابيع.
• موقعنا تحديث الأسبوعي.
• كل أسبوع، وسوف نقوم بتحديث "قائمة المنتجات" صفحة.
• كما أن لدينا "تفاصيل المنتج" صفحة، ولم يتم تطويرها.
• في الأسابيع الخمسة الأولى، فقد أضفنا مجموعة الآلية الوقائية الوطنية الجديدة.
• في الأسابيع الثمانية الأولى، لقد قمنا بتحديث حزمة الآلية الوقائية الوطنية القائمة.

 خط الأساس

لنفترض أن لدينا حجم الحزمة جافا سكريبت هو 400 KB، main.js يحتوي فقط على ملف واحد.

تكوين لدينا Webpack كما يلي (I تجاهل التكوين غير ذي صلة):

تتطلب مسار CONST = ( 'مسار')؛ module.exports = { دخول: path.resolve (__ dirname، "SRC / index.js ')، الإخراج: { مسار: path.resolve (__ dirname، 'حي')، اسم الملف: " . شبيبة، }، }؛

كل أسبوع، ونحن عندما إجراء بعض التغييرات، contenthash وهذه الحزمة تتغير. ولذلك، يجب على أليس الأسبوعي تحميل ملف جديد 400 KB عند زيارة موقعنا على الانترنت.

نشير إلى هذه السجلات الرقمية في الجدول، يبدو مثل هذا.

عدد مرات التحميل 4.12 MB، لمدة 10 أسابيع.

ولكن يمكننا أن نفعل ما هو أفضل.

 حزمة بائع تقسيم

الآن، ونحن سوف حزمة تنقسم إلى main.js وvendor.js الملف.

انها جدا بسيطة:

تتطلب مسار CONST = ( 'مسار')؛ module.exports = { دخول: path.resolve (__ dirname، "SRC / index.js ')، الإخراج: { مسار: path.resolve (__ dirname، 'حي')، اسم الملف: " . شبيبة، }، الأمثل: { splitChunks: { قطع: 'كل'، }، }، }؛

Webpack 4 تحاول أن تفعل أفضل شيء بالنسبة لك، حتى أنك لا تحتاج أن تقول ذلك كيف تريد تقسيم الحزمة.

بعض الناس يقولون: "هذا يبدو أنيق جدا، لطيف، Webpack!"

وقيل أيضا: "أنت لم حقيبتي ماذا؟"

optimization.splitChunks.chunks مجموعة = 'كل' تعني "كل شيء node_modules في ملف مسمى البائعين ~ main.js في."

بعد هذا الانقسام حزمة الأساسي، أليس لا تزال بحاجة إلى تحميل كل جديد ملف 200 KB main.js عند الوصول إلى موقع ويب، ومن ثم في الأسبوع الأول، 8 أسابيع و 5 أسابيع من vendor.js تحميل 200 KB ملف على حدة.

الآن تنزيل مجموعه 2.64 MB.

تخفيض بنسبة 36. بالإضافة إلى خمسة أسطر من التعليمات البرمجية في التكوين، وكانت النتائج جيدة.

ويبدو أن هذا الأداء تافهة بعض الشيء، لأنه هو مجموع تضيف ما يصل إلى 10 أسابيع، ولكن على أي حال، وعدد من وحدات البايت إرسالها إلى المستخدم خفضت بالفعل بنسبة 36، ونحن يجب أن تكون فخورا بنفسك.

ولكن يمكننا أن نفعل ما هو أفضل.

كل علبة انقسام الآلية الوقائية الوطنية

vendors.js تواجه نفس المشكلة مثل main.js الملف الأصلي - إجراء تغييرات على جزء من الملف يجب أن إعادة تحميل الملف بأكمله.

فلماذا لا تقدم على أنها ملف منفصل لكل حزمة الآلية الوقائية الوطنية؟ فإنه من السهل القيام به.

لذلك دعونا سيكون رد فعل، lodash، لحظة مسترجع وانقسام في ملفات مختلفة مثل:

تتطلب مسار CONST = ( 'مسار')؛ CONST webpack = تتطلب ( 'webpack')؛ module.exports = { دخول: path.resolve (__ dirname، "SRC / index.js ')، الإضافات: الإخراج: { مسار: path.resolve (__ dirname، 'حي')، اسم الملف: " . شبيبة، }، الأمثل: { runtimeChunk: 'واحد'، splitChunks: { قطع: 'كل'، maxInitialRequests: إنفينيتي، minSize: 0، cacheGroups: { بائع: { اختبار: / node_modules /، اسم (وحدة) { // الحصول على اسم. على سبيل المثال node_modules / PACKAGENAME / لا / هذا / part.js // أو node_modules / PACKAGENAME CONST PACKAGENAME = module.context.match (/ node_modules (*) ( | $) /؟) . أسماء // حزمة الآلية الوقائية الوطنية هي عنوان URL آمن، ولكن بعض خوادم لا يحبون حرف @ . العودة `الآلية الوقائية الوطنية $ {packageName.replace ( '@'، '')}`. }، }، }، }، }، }؛

جعل Webpack ثيقة (https://webpack.js.org/guides/caching/) تفسيرا جيدا لهذا، سوف يفسر جزء رائع تقريبا، لأنني قضيت الكثير من الوقت في ما سبق:

• العروض Webpack بعض الإعدادات الافتراضية حتى لا الذكية، مثل ملف الإخراج انقسام تصل إلى ثلاثة، (وسيتم ربط ملف أصغر معا) أصغر حجم الملف 30 KB، لذلك غطيت هذه الإعدادات.
• ونحن نعرف كيف Webpack كتلة التعليمات البرمجية الحزمة إلى ملف الإخراج بواسطة cacheGroups. هنا يمكنني استخدام "بائع"، وحدة المعالجة تحميلها من node_modules. عادة، ما عليك سوى تحديد اسم الملف الناتج كسلسلة، ولكنني لن اسم معرف بوصفها وظيفة (استدعاء هذه الدالة عند تحليل كل ملف). ثم أعود إلى اسم مسار حزمة وحدة على أساس. وهكذا، على كل صفقة، وسوف تحصل على الملف، على سبيل المثال npm.react-dom.899sadfhj4.js.
• لغرض الإفراج عنهم، يجب أن يكون الآلية الوقائية الوطنية اسم الحزمة URL آمنة (https://docs.npmjs.com/files/package.json#name)، لذلك نحن لسنا بحاجة إلى أن تكون PACKAGENAME encodeURI. ومع ذلك، واجه مشكلة هذا الخادم. NET لا يدعم اسم الملف مع @، ولذا فإنني سوف يكون في هذا جزء التعليمات البرمجية التي استبدلت بها.
• الإعداد كله عظيم، لا صيانة إضافية - أنا لا تشير إلى أي الحزمة.

أليس ما زال في الأسبوع لإعادة تحميل 200 KB ملف main.js، وعندما لها أول زيارة لموقع سيظل تحميل 200 KB حزمة الآلية الوقائية الوطنية، ولكنها لن تحميل حزمة نفس مرتين.

تحميل الآن ويبلغ مجموع 2.24 MB، بالمقارنة مع خط الأساس بنسبة 44.

وأتساءل عما إذا كان من الممكن للحد من 50؟

رمز التطبيق الانقسام

الآن دعونا نعود مرة أخرى ومرة أخرى سوء main.js أليس تحميل الملف.

كما ذكرت من قبل، وهناك قسمين منفصلين على موقعنا على الانترنت: المنتج صفحة قائمة وتفاصيل المنتج الصفحة. كل قسم من التعليمات البرمجية ليست هي نفسها 25 KB (مشتركة كود 150 KB).

"تفاصيل المنتج" الصفحة الآن الكثير من التغيير لم يحدث، لذلك إذا أردنا تحويله إلى ملف منفصل، أكثر من الوقت الذي يمكن الحصول عليه من ذاكرة التخزين المؤقت.

وبالإضافة إلى ذلك، لدينا ملف مضمنة SVG ضخمة لتقديم رمز، وحجم 25 KB، ونادرا ما يغير تحدث.

ما الذي يجب علينا القيام به حيال ذلك.

أضفنا بعض الإدخال اليدوي، ونقول Webpack إنشاء ملف لكل عنصر.

module.exports = { دخول: { الرئيسية: path.resolve (__ dirname، "SRC / index.js ')، ProductList: path.resolve (__ dirname، "SRC / ProductList / ProductList.js ')، ProductPage: path.resolve (__ dirname، "SRC / ProductPage / ProductPage.js ')، رمز: path.resolve (__ dirname، "SRC / رمز / Icon.js ')، }، الإخراج: { مسار: path.resolve (__ dirname، 'حي')، اسم الملف: " . شبيبة، }، الإضافات: الأمثل: { runtimeChunk: 'واحد'، splitChunks: { قطع: 'كل'، maxInitialRequests: إنفينيتي، minSize: 0، cacheGroups: { بائع: { اختبار: / node_modules /، اسم (وحدة) { // الحصول على اسم. على سبيل المثال node_modules / PACKAGENAME / لا / هذا / part.js // أو node_modules / PACKAGENAME CONST PACKAGENAME = module.context.match (/ node_modules (*) ( | $) /؟) . أسماء // حزمة الآلية الوقائية الوطنية هي عنوان URL آمن، ولكن بعض خوادم لا يحبون حرف @ . العودة `الآلية الوقائية الوطنية $ {packageName.replace ( '@'، '')}`. }، }، }، }، }، }؛

Webpack يخلق أيضا تبادل الملفات بين ProductList والمحتوى ProductPage، لذلك لم نحصل على كود المتكررة.

وهذا من شأنه تعتقد عزيزي أليس بتحميل 50 KB من المدخرات.

عدد مرات التحميل الآن فقط 1.815 MB!

لقد حفظ ما يصل إلى 56 من التنزيلات كما أليس، في السيناريو النظري لدينا، وهذا يمكن أن يستمر الوضع.

حتى الآن، لدينا فقط لتحقيق كل هذا عن طريق تعديل تكوين Webpack - لم يكن لإجراء أية تغييرات على رمز التطبيق.

هدفنا هو أن تكون انقسام في تطبيق معقول من الملفات الصغيرة، مما يسمح للمستخدمين بتحميل أقل رمز.

لذلك، ثم لدينا لدخول انقسام متاحة، ولكن أولا أريد أن معالجة ثلاثة أسئلة تعتقد الآن من. السؤال 1: طلب شبكة الاتصال ليس هناك الكثير ببطء أكثر؟

لهذا السؤال، والجواب هو جدا "لا".

في عصر HTTP / 1.1 قد يكون الأمر كذلك، ولكن لHTTP / 2 ليس هو الحال.

ورغم أن بعض المادة المعروفة تأتي "حتى مع HTTP / 2، تحميل الملفات لا تزال بطيئة جدا" الاستنتاج، ولكن في هذه المواد، ما يسمونه "كثيرا" يشير الملف إلى ملف "مئات". تذكر ذلك، إذا كان لديك مئات الملفات، قد تصل إلى حد التزامن العلوي.

السؤال 2: كل Webpack الرزمة ليس رمز النمطي؟

نعم.

السؤال 3: إذا كان هناك ملفات صغيرة متعددة، لا تفقد فوائد ضغط حتى الآن؟

نعم.

حسنا، هذا هو القول:

• المزيد من الملفات = كود النمطي أكثر Webpack.
• المزيد من ملف = أقل ضغط.

دعونا نفعل شيئا كميا، بحيث تتمكن من معرفة بالضبط كم أداء يلبس.

لقد فعلت ذلك لاختبار، تنقسم إلى 19 ملف 190KB ملف صغير، وبالتالي زيادة عدد وحدات البايت إرسالها إلى مستعرض بنحو 2.

ويمكن خفض وزيادة بنسبة 2 في الزيارة الأولى، ولكن بعد الزيارة التي قام بها 60، لذلك يمكن القول أن هناك أي لبس.

I تم اختبارها للملف و 19 ملفات، واستنادا إلى مختلف الشبكات، بما في ذلك HTTP / 1.1.

هذا هو نتيجة لالطاولة، وأعتقد أن هذا يكفي لإظهار "المزيد من الملفات بشكل أفضل":

في شبكات الجيل الثالث 3G و 4G، عندما يكون المستند 19، يتم تقليل إجمالي وقت التحميل بنسبة 30.

وبطبيعة الحال، فإن هذه البيانات مع كمية معينة من الضوضاء. على سبيل المثال، للمرة الثانية على الحمل شبكة 4G هو 646 مللي، 1116 مللي الحاجة بعد يومين - أكثر من 73. ولذلك، يدعي HTTP / 2 "30 أسرع" يبدو الشعور بالذنب قليلا.

أريد أن تجعل من هذا الجدول لتحديد الفرق بين HTTP / 2، ولكن يبدو أن الشيء الوحيد الذي يمكنني قوله هو "قد لا يكون هناك فرق كبير."

المفاجأة الحقيقية هي آخر سطرين، أنا أصلا يعتقد أن ويندوز القديمة وHTTP / 1.1 سيكون بطيئا جدا.

هذا هو كل شيء عن انقسام واحدة لا بد لي من القول. أعتقد أن العيب الوحيد لهذا النهج هو الاستمرار في إقناع الناس، لتحميل عدد كبير من الملفات الصغيرة ليست مشكلة.

الآن، دعونا نتحدث عن نوع آخر من تقسيم الملف.

رموز تقسيم (رمز لا تحتاج إلى تحميل)

قد يكون هذا النهج مفيدا فقط لبعض المواقع.

I اخترع 20/20 القاعدة: إذا أجزاء من موقع الويب الخاص بك، فقط 20 من المستخدمين زيارة، والتي هي جزء من الموقع كله أكثر من 20 من جافا سكريبت، ثم عليك أن مطالبة كود التحميل.

من الواضح، بسبب مشاهد أكثر تعقيدا، لذلك هذا الرقم هو حاجة واضحة لإجراء تعديلات. ولكن المفتاح هو أن هناك بالتأكيد نوعا من التوازن، لتحقيق التوازن بين هذه النقطة، وتقسيم رمز لموقع الويب الخاص بك، فإنه قد لا يكون له معنى.

 كيفية العثور على هذا التوازن؟

لنفترض لديك موقع التسوق، يجب أن كنت تريد أن تعرف ما إذا كان "الخروج" الانقسام الرمز، لأن 30 فقط من المستخدمين تنفيذ هذه العملية.

كنت بحاجة لمعرفة كم كود يرتبط فقط مع إغلاق هذه الوظيفة. لأن قبل "تقسيم كود" كان "انقسام تجميع"، لذلك كنت قد تعرف بالفعل بالضبط كم من هذا الجزء من التعليمات البرمجية.

تتعلق فقط مع رمز الخروج هو 7 KB، والباقي هو 300 KB. أرى أن هذا سوف أقول، وأنا لا أريد أن تقسيم هذا الرمز، وذلك للأسباب التالية:

• لا قبل تحميله بطيئة، لأنك تحميل مواز هذه الملفات. ويمكنك أن تجرب إن أمكن لتسجيل 300 KB و 307 KB الفرق في وقت التحميل.
• إذا قمت بتحميل هذا الرمز في وقت لاحق، بعد أن ينقر المستخدم على "خذ نقودي" يجب أن تنتظر لتحميل هذا الملف - وهذا هو آخر شيء تريده عندما واجه الاحتكاك.
• الحاجة كود تقسيم لتغيير رمز التطبيق. انه يقدم منطق غير متزامن حيث سبق إلا منطق المزامنة. انها ليست علم الصواريخ، ولكن تعقيدها، وأعتقد أنه يجب أن ينظر إليها كما يتضح من التحسينات على تجربة المستخدم. .

الآن دعونا ننظر في على مثالين من التعليمات البرمجية التي يحتاجها لتقسيم.

polyfill

السبب في أنني بدأت في التحدث هنا، لأنه ينطبق على معظم المواقع، وبسيط نسبيا لإدخال.

أنا استخدم الكثير من الميزات يتوهم على الموقع، وهناك ملف لاستيراد جميع polyfill اللازم. وهذا يشمل الخطوط الثمانية التالية:

تتطلب ( 'WHATWG-إحضار')؛ تتطلب ( 'تي')؛ تتطلب ( 'رابط-polyfill')؛ تتطلب ( 'الأساسية شبيبة على شبكة الإنترنت / / دوم-مجموعات')؛ تتطلب ( 'الأساسية شبيبة / ES6 / خريطة')؛ تتطلب ( 'الأساسية شبيبة / ES6 / سلسلة')؛ تتطلب ( 'الأساسية شبيبة / ES6 / مجموعة')؛ تتطلب ( 'الأساسية شبيبة / ES6 / وجوه')؛

I استيراد الملف في الجزء العلوي من index.js.

استيراد "./polyfills '؛ استيراد رد فعل من 'رد فعل'؛ استيراد ReactDOM من "رد فعل دوم '؛ استيراد التطبيقات من "./App/App '؛ استيراد "./index.css '؛ تقديم CONST = () = >  { ReactDOM.render ( < التطبيق / > ، Document.getElementById (جذر '))؛ } تقديم ()؛ // نعم أنا بلا قيمة، في الوقت الراهن

تقسيم Webpack تكوين حزمة من قبل و، polyfill تقسيم تلقائيا إلى أربعة ملفات مختلفة، لأن هناك أربعة حزمة الآلية الوقائية الوطنية. حيث يصل حوالي 25 KB، ولكن 90 من المتصفحات لا حاجة إليها، فمن الضروري لديناميكية التحميل.

استخدام Webpack 4 واستيراد () جملة (وينبغي عدم الخلط بينه وبين جملة الواردات) يمكن تحقيق ظروف التحميل polyfill بسهولة.

استيراد رد فعل من 'رد فعل'؛ استيراد ReactDOM من "رد فعل دوم '؛ استيراد التطبيقات من "./App/App '؛ استيراد "./index.css '؛ تقديم CONST = () = >  { ReactDOM.render ( < التطبيق / > ، Document.getElementById (جذر '))؛ } إذا ( "الجلب" في نافذة && 'تي' في نافذة && "URL" في نافذة && "خريطة" في نافذة && "ForEach" في NodeList.prototype && "StartsWith" في String.prototype && "EndsWith" في String.prototype && "يشمل" في String.prototype && "يشمل" في Array.prototype && "تعيين" في كائن && "مقالات" في كائن && "مفاتيح" في كائن ) { تقديم ()؛ } {شيء آخر استيراد ( './ polyfills') ثم (تقديم)؛ }

إذا كان يدعم متصفح كافة الميزات، ثم عرض الصفحة، وإلا هناك ستستورد polyfill، ومن ثم تقديم صفحة. عند تشغيل التعليمات البرمجية في المتصفح، عند تشغيل Webpack سيكون مسؤولا عن تحميل حزمة أربعة الآلية الوقائية الوطنية، بعد تحميل وتحليل منهم سيدعو تقديم () ......

بالمناسبة، لاستخدام استيراد ()، تتطلب المكونات الديناميكية والاستيراد من بابل (https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/). وبالإضافة إلى ذلك، Webpack كما هو موضح في الوثيقة، استيراد () يستخدم وعد، لذلك تحتاج للفصل بينهما polyfill.

هذا هو بسيط جدا، أليس كذلك؟ أشر إلى قليلا من الصعب أدناه.

التوجيه على أساس تحميل الديناميكي (محددة يردون)

العودة الى المثال أليس، ونحن نفترض أن الموقع لديه وظيفة "إدارة"، يمكن للمشترك الدخول وإدارة بضاعتهم.

يحتوي هذا القسم على العديد من الميزات الرائعة، وعدد كبير من الرسوم البيانية والرسوم البيانية تحتاج إلى الكثير من مكتبة كبيرة الآلية الوقائية الوطنية. كما تم إحداث انقسام حزمة، هم حوالي 100 ملف KB.

حاليا، يتم تعيين طريقي حتى عندما يقوم المستخدمون الوصول الوقت / مشرف، سيجعل < AdminPage > . عندما Webpack عن محتوى المجمعة معا، وسوف تجد AdminPage الاستيراد من ./AdminPage.js، ثم قال: "أنا في حاجة إلى إدراجه في التعليمات البرمجية التهيئة الخاصة بك."

ولكن نحن لا نريد بهذه الطريقة. نحن بحاجة إلى استخدام استيراد الحيوية، مثل استيراد ( '/ AdminPage.js')، لذلك Webpack تعرف ليتم تحميلها بشكل حيوي.

وهذا بارد، أنها لا تتطلب أي تكوين.

حتى أتمكن من إنشاء مكون آخر، عندما يزورها المستخدم / المشرف سيجعل عند هذا المكون، بدلا من AdminPage إشارة مباشرة. قد يبدو مثل هذا:

استيراد رد فعل من 'رد فعل'؛ الطبقة AdminPageLoader يمتد React.PureComponent { منشئ (الدعائم) { سوبر (الدعائم)؛ this.state = { AdminPage: باطل، } } componentDidMount () { استيراد ( './ AdminPage'). ثم (وحدة = >  { this.setState ({AdminPage: module.default})؛ })؛ } تقديم () { CONST {AdminPage} = this.state. عودة AdminPage ؟ < AdminPage {...} this.props / > : < شعبة > تحميل ... < / شعبة > . } } تصدير AdminPageLoader الافتراضية.

مفهوم بسيط. عند تحميل المكون (أي وصول المستخدم / المشرف) إشارة، فإننا سوف تحميل حيوي ./AdminPage.js، ثم قم بحفظ التجميع في الدولة.

انتظار < AdminPage > عند تحميلها، ونحن تقديم فقط تقديم الأسلوب () < شعبة >  تحميل ... < / شعبة > أو تقديم عند اكتمال التحميل < AdminPage > وتخزينها في الدولة.

أفعل هذا من أجل المتعة، ولكن في العالم الحقيقي، يمكنك استخدام الرد-loadable، وتتفاعل وثيقة (https://reactjs.org/docs/code-splitting.html) وصفا للانقسام التعليمات البرمجية التي.

وهذه كلها أريد أن أقول، ببساطة، هو:

إذا عدة مستخدمين سيزور موقعك، يرجى ارسال يتم تقسيم الشفرة إلى العديد من الملفات الصغيرة. وإذا كان بعض أجزاء من موقعك ليست في متناول معظم المستخدمين، يرجى تحميل كود حيوي.

 النص الانكليزي

https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758