मॉडर्न बिल्ड बनाना

नमस्कार, हेब्र!

प्रत्येक आधुनिक ब्राउज़र अब आपको ES6 मॉड्यूल के साथ काम करने की अनुमति देता है।

पहली नज़र में, ऐसा लगता है कि यह पूरी तरह से बेकार बात है - आखिरकार, हम सभी कलेक्टरों का उपयोग करते हैं जो आयात को अपनी आंतरिक चुनौतियों से बदल देते हैं। लेकिन अगर आप विशिष्टताओं में बदलाव करते हैं, तो यह पता चलता है कि उनके लिए धन्यवाद आप आधुनिक ब्राउज़रों के लिए एक अलग असेंबली दे सकते हैं।

बिल्ली के नीचे एक कहानी है कि कैसे मैं पुराने ब्राउज़रों और मेरी नसों के पूर्वाग्रह के बिना आवेदन के आकार को 11% तक कम करने में सक्षम था।

ES6 मॉड्यूल की विशेषताएं

ES6 मॉड्यूल सभी के लिए एक प्रसिद्ध और व्यापक रूप से इस्तेमाल किया जाने वाला मॉड्यूलर सिस्टम है:

/* someFile.js */ import { someFunc } from 'path/to/helpers.js' 

 /* helpers.js */ export function someFunc() { /* ... */ } 

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

 <!--        ES6 Modules --> <script type="module" src="/path/to/someFile.js"></script> 

विनिर्देशन में स्क्रिप्ट टैग के लिए नामांकित विशेषता भी होती है। ES6 मॉड्यूल का समर्थन करने वाले ब्राउज़र इस स्क्रिप्ट की उपेक्षा करेंगे, और पुराने ब्राउज़र इसे डाउनलोड करेंगे और इसे निष्पादित करेंगे।

 <!--       --> <script nomodule src="/path/to/someFileFallback.js"></script> 

यह पता चला है कि आप केवल दो असेंबली बना सकते हैं: पहला आधुनिक ब्राउज़रों (मॉडर्न बिल्ड) के लिए मॉड्यूल प्रकार के साथ, और दूसरा पुराने ब्राउज़रों के लिए नामांकित के साथ (फ़ॉलबैक बिल्ड):

 <script type="module" src="/path/to/someFile.js"></script> <script nomodule src="/path/to/someFileFallback.js"></script> 

क्यों जरूरी है?

उत्पादन के लिए एक परियोजना भेजने से पहले, हमें चाहिए:

• पॉलीफिल्स जोड़ें।
• एक पुराने से आधुनिक कोड ट्रांसजेंड करें।

अपनी परियोजनाओं में, मैं अधिकतम संख्या में ब्राउज़रों का समर्थन करने की कोशिश करता हूं, कभी-कभी IE 10 भी। इसलिए, पॉलीफ़ाइल्स की मेरी सूची में ऐसी बुनियादी चीजें शामिल हैं जैसे es6.promise, es6.object.values, आदि। लेकिन ES6 मॉड्यूल वाले ब्राउज़र सभी ES6 विधियों का समर्थन करते हैं, और उन्हें पॉलीफ़िल के अतिरिक्त किलोबाइट की आवश्यकता नहीं होती है।

वाष्पोत्सर्जन फ़ाइल आकार पर एक ध्यान देने योग्य निशान भी छोड़ देता है: बेबल / प्रीसेट-एनवी सबसे ब्राउज़रों को कवर करने के लिए 25 ट्रांसफार्मर का उपयोग करता है, जिनमें से प्रत्येक कोड के आकार को बढ़ाता है। उसी समय, ES6 मॉड्यूल समर्थन वाले ब्राउज़रों के लिए, ट्रांसफार्मर की संख्या 9 तक कम हो जाती है।

इसलिए, आधुनिक ब्राउज़रों के लिए असेंबली में, हम अनावश्यक पॉलीफ़ाइल्स को हटा सकते हैं और ट्रांसफार्मर की संख्या को कम कर सकते हैं, जो परिणामस्वरूप फ़ाइलों के आकार को बहुत प्रभावित करेगा!

पॉलीफ़ाइल्स कैसे जोड़ें

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



आमतौर पर, परियोजनाएं सभी संभावित पॉलीफ़िल को जोड़ने के लिए कोर-जेएस का उपयोग करती हैं।

बेशक, आप इस लाइब्रेरी से सभी 88 Kbytes polyfiles नहीं चाहते हैं, लेकिन केवल वे जो आपके ब्राउज़र सूची के लिए आवश्यक हैं। यह सुविधा babel / preset-env और इसके उपयोग का विकल्प उपलब्ध है। यदि आप इसे प्रविष्टि में सेट करते हैं, तो कोर-जेएस के आयात को आपके ब्राउज़र की आवश्यकता वाले व्यक्तिगत मॉड्यूल के आयात से बदल दिया जाएगा:

 /* .babelrc.js */ module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'entry', /* ... */ }] ], /* ... */ }; 

 /*   */ import 'core-js'; 

 /*   */ import "core-js/modules/es6.array.copy-within"; import "core-js/modules/es6.array.fill"; import "core-js/modules/es6.array.find"; /*   -  */ 

लेकिन इस तरह के परिवर्तन से हमें अनावश्यक बहुत पुरानी पॉलीफिल्स के केवल एक हिस्से से छुटकारा मिला। हमारे पास अभी भी टाइपेड एरे, वीकएप और अन्य अजीब चीजें हैं जो परियोजना में कभी उपयोग नहीं की जाती हैं।

इस समस्या को पूरी तरह से दूर करने के लिए, useBuiltIns विकल्प के लिए मैंने उपयोग करने के लिए मूल्य निर्धारित किया है। संकलन चरण में, बैबेल / प्रीसेट-एनव उन विशेषताओं का उपयोग करने के लिए फ़ाइलों का विश्लेषण करेगा जो चयनित ब्राउज़रों में उपलब्ध नहीं हैं, और उनमें पॉलीफ़ाइल्स जोड़ें:

 /* .babelrc.js */ module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', /* ... */ }] ], /* ... */ }; 

 /*   */ function sortStrings(strings) { return strings.sort(); } function createResolvedPromise() { return Promise.resolve(); } 

 /*   */ import "core-js/modules/es6.array.sort"; import "core-js/modules/es6.promise"; function sortStrings(strings) { return strings.sort(); } function createResolvedPromise() { return Promise.resolve(); } 

ऊपर के उदाहरण में, बैबेल / प्रीसेट-एनव ने सॉर्ट फ़ंक्शन के लिए एक पॉलीफ़ाइल जोड़ा। आप जावास्क्रिप्ट में यह पता नहीं लगा सकते हैं कि फ़ंक्शन किस प्रकार के ऑब्जेक्ट को पास किया जाएगा - यह एक सरणी या एक क्लास ऑब्जेक्ट होगा जिसमें सॉर्ट फ़ंक्शन होगा, लेकिन बैबेल / प्रीसेट-एनव सबसे खराब स्थिति का चयन करता है और एक पॉलीफाइल सम्मिलित करता है।

हर समय गलतियाँ / पूर्व निर्धारित करना गलत है। अनावश्यक पॉलीफ़ाइल्स को निकालने के लिए, समय-समय पर जाँचें कि आप उनमें से कौन सा आयात करते हैं, और बहिष्कृत विकल्प का उपयोग करके अनावश्यक को हटा दें:

 /* .babelrc.js */ module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', //   ,  ,     debug: true, //      exclude: ['es6.regexp.to-string', 'es6.number.constructor'], /* ... */ }] ], /* ... */ }; 

मैं पुनर्योजी-रनटाइम मॉड्यूल पर विचार नहीं करता हूं, क्योंकि मैं फास्ट-एस्कॉन का उपयोग करता हूं ( और मैं सभी को सलाह देता हूं )।

मॉडर्न बिल्ड बनाएं

चलिए मॉडर्न बिल्ड सेट करते हैं।

सुनिश्चित करें कि हमारे पास प्रोजेक्ट में एक ब्राउज़र सूची फ़ाइल है जो सभी आवश्यक ब्राउज़रों का वर्णन करती है:

 /* .browserslistrc */ > 0.5% IE 10 

बिल्ड के दौरान BROWSERS_ENV पर्यावरण चर जोड़ें, जो मानों को कम कर सकता है (फ़ॉलबैक बिल्ड के लिए) और आधुनिक (मॉडर्न बिल्ड के लिए):

 /* package.json */ { "scripts": { /* ... */ "build": "NODE_ENV=production webpack /.../", "build:fallback": "BROWSERS_ENV=fallback npm run build", "build:modern": "BROWSERS_ENV=modern npm run build" }, /* ... */ } 

अब babel / preset-env का कॉन्फ़िगरेशन बदलें। पूर्व निर्धारित में समर्थित ब्राउज़रों को निर्दिष्ट करने के लिए एक विकल्प लक्ष्य है। उसका एक विशेष संक्षिप्त नाम है - एसमोड्यूल्स। इसका उपयोग करते समय, बैबल / प्रीसेट-एनवी स्वचालित रूप से उन ब्राउज़रों को स्थानापन्न करेगा जो ईएस 6 मॉड्यूल का समर्थन करते हैं।

 /* .babelrc.js */ const isModern = process.env.BROWSERS_ENV === 'modern'; module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', //  Modern Build     ES6 modules, //   Fallback Build     .browsersrc targets: isModern ? { esmodules: true } : undefined, /* ... */ }] ], /* ... */ ], }; 

बाबेल / प्रीसेट-एनवी आगे हमारे लिए सभी काम करेगा: यह केवल आवश्यक पॉलीफाइल्स और परिवर्तनों का चयन करेगा।

अब हम आधुनिक या पुराने ब्राउज़र्स के लिए कंसोल से सिर्फ एक कमांड बना सकते हैं!

बिंद मॉडर्न और फॉलबैक बिल्ड

अंतिम चरण में मॉडर्न और फालबैक बिल्ड्स को एक में जोड़ना है।

मैं इस तरह की परियोजना संरचना बनाने की योजना बना रहा हूं:

 //     dist/ //  html- index.html //   Modern Build' modern/ ... //   Fallback Build' fallback/ ... 

Index.html में दोनों विधानसभाओं से आवश्यक जावास्क्रिप्ट फ़ाइलों के लिंक होंगे:

 /* index.html */ <html> <head> <!-- ... --> </head> <body> <!-- ... --> <script type="module" src="/modern/js/app.540601d23b6d03413d5b.js"></script> <script nomodule src="/fallback/js/app.4d03e1af64f68111703e.js"></script> </body> </html> 

इस चरण को तीन भागों में विभाजित किया जा सकता है:

1. बिल्ड मॉडर्न एंड फॉलबैक बिल्ड डिफरेंट डाइरेक्टरीज़ में।
2. आवश्यक जावास्क्रिप्ट फ़ाइलों के लिए रास्तों के बारे में जानकारी प्राप्त करना।
3. सभी जावास्क्रिप्ट फ़ाइलों के लिंक के साथ index.html बनाना।

चलो शुरू हो जाओ!

बिल्ड मॉडर्न एंड फॉलबैक बिल्ड डिफरेंट डाइरेक्टरीज़ में

शुरू करने के लिए, आइए सबसे आसान कदम उठाएं - हम डिस्टर्ब डायरेक्टरी के अंदर मॉडर्न और फॉलबैक बिल्ड को अलग-अलग डायरेक्टरी में इकट्ठा करेंगे।

आउटपुट के लिए वांछित निर्देशिका को निर्दिष्ट करना केवल असंभव है। डाक से, क्योंकि हमें डिस्ट्रेक्ट डाइरेक्टरी के संबंध में फाइल्स के लिए पथों की आवश्यकता है (index.html इस डाइरेक्टरी में है, और अन्य सभी निर्भरताएँ इसके सापेक्ष पंप की जाएंगी)।

फ़ाइल पथ बनाने के लिए एक विशेष कार्य बनाएँ:

 /* getFilePath.js */ /*   ,       */ const path = require('path'); const isModern = process.env.BROWSERS_ENV === 'modern'; const prefix = isModern ? 'modern' : 'fallback'; module.exports = relativePath => ( path.join(prefix, relativePath) ); 

 /* webpack.prod.config.js */ const getFilePath = require('path/to/getFilePath'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'production', output: { path: 'dist', filename: getFilePath('js/[name].[contenthash].js'), }, plugins: [ new MiniCssExtractPlugin({ filename: getFilePath('css/[name].[contenthash].css'), }), /* ... */ ], /* ... */ } 

प्रोजेक्ट मॉडर्न और फॉलबैक बिल्ड के लिए अलग-अलग डायरेक्टरी में इकट्ठा होना शुरू हुआ।

आवश्यक जावास्क्रिप्ट फ़ाइलों के लिए रास्तों के बारे में जानकारी प्राप्त करना

एकत्रित फ़ाइलों के बारे में जानकारी प्राप्त करने के लिए, वेबपैक-मैनिफ़ेस्ट-प्लगइन कनेक्ट करें। असेंबली के अंत में, वह पथों पर डेटा के साथ एक मेनिफ़ेस्ट। Json फ़ाइल जोड़ देगा:

 /* webpack.prod.config.js */ const getFilePath = require('path/to/getFilePath'); const WebpackManifestPlugin = require('webpack-manifest-plugin'); module.exports = { mode: 'production', plugins: [ new WebpackManifestPlugin({ fileName: getFilePath('manifest.json'), }), /* ... */ ], /* ... */ } 

अब हमारे पास एकत्रित फ़ाइलों के बारे में जानकारी है:

 /* manifest.json */ { "app.js": "/fallback/js/app.4d03e1af64f68111703e.js", /* ... */ } 

सभी जावास्क्रिप्ट फ़ाइलों के लिंक के साथ index.html बनाना

केवल एक ही चीज़ है index.html को जोड़ना और उसमें आवश्यक फ़ाइलों के लिए पथ सम्मिलित करना।

Html फ़ाइल बनाने के लिए, मैं मॉडर्न बिल्ड के दौरान html-webpack-plugin का उपयोग करूँगा। Html-webpack-plugin आधुनिक फाइल्स में ही पथ को सम्मिलित करेगा, और मैं पिछले चरण में बनाई गई फ़ाइल से फ़ॉलबैक फ़ाइलों को पथ प्राप्त करूँगा और उन्हें एक छोटे वेबपैक प्लगइन का उपयोग करके HTML में पेस्ट करूँगा:

 /* webpack.prod.config.js */ const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModernBuildPlugin = require('path/to/ModernBuildPlugin'); module.exports = { mode: 'production', plugins: [ ...(isModern ? [ //  html-  Modern Build new HtmlWebpackPlugin({ filename: 'index.html', }), new ModernBuildPlugin(), ] : []), /* ... */ ], /* ... */ } 

 /* ModernBuildPlugin.js */ // Safari 10.1    nomodule. //      Safari   . //    : // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc const safariFix = '!function(){var e=document,t=e.createE/* ...   ... */'; class ModernBuildPlugin { apply(compiler) { const pluginName = 'modern-build-plugin'; //    Fallback Build const fallbackManifest = require('path/to/dist/fallback/manifest.json'); compiler.hooks.compilation.tap(pluginName, (compilation) => { //    html-webpack-plugin, //      HTML compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(pluginName, (data, cb) => { //  type="module"  modern- data.body.forEach((tag) => { if (tag.tagName === 'script' && tag.attributes) { tag.attributes.type = 'module'; } }); //    Safari data.body.push({ tagName: 'script', closeTag: true, innerHTML: safariFix, }); //  fallback-   nomodule const legacyAsset = { tagName: 'script', closeTag: true, attributes: { src: fallbackManifest['app.js'], nomodule: true, defer: true, }, }; data.body.push(legacyAsset); cb(); }); }); } } module.exports = ModernBuildPlugin; 

अद्यतन पैकेज।

 /* package.json */ { "scripts": { /* ... */ "build:full": "npm run build:fallback && npm run build:modern" }, /* ... */ } 

Npm रन बिल्ड: फुल कमांड का उपयोग करते हुए, हम मॉडर्न और फॉलबैक बिल्ड के साथ एक html फाइल बनाएंगे। कोई भी ब्राउज़र अब जावास्क्रिप्ट प्राप्त करेगा कि यह निष्पादित करने में सक्षम है।

अपने आवेदन में आधुनिक निर्माण जोड़ें

कुछ वास्तविक पर मेरे समाधान का परीक्षण करने के लिए, मैंने इसे अपनी एक परियोजना में निकाल दिया। कॉन्फ़िगरेशन सेट करना मुझे एक घंटे से भी कम समय लगा, और जावास्क्रिप्ट फ़ाइलों का आकार 11% कम हो गया। एक साधारण कार्यान्वयन के साथ शानदार परिणाम।

लेख को अंत तक पढ़ने के लिए धन्यवाद!

सामग्री का इस्तेमाल किया

• स्पीड आवश्यक: फास्ट वेबसाइटों के लिए मुख्य तकनीक
• Vue CLI आधुनिक मोड