😞 🚀 🌄 अपने वेबपैक एप्लिकेशन को अनुकूलित करने के लिए 4 टिप्स 👨‍👩‍👧 👩🏼‍🤝‍👩🏻 👨🏾‍🚀

सभी को नमस्कार!

वेबपैक के साथ अपने काम के दौरान, मैंने कुछ दिलचस्प युक्तियों को संचित किया है जो आपको पूरी तरह से अनुकूलित एप्लिकेशन तैयार करने में मदद करेंगे। चलो शुरू हो जाओ!

फ्रंट-एंड कैट ने वेबपैक देखा और कहा 'बेलिसिमो'

1. रीजेनरेटर-रनटाइम के बजाय फास्ट-एसिंक्स का उपयोग करें

आमतौर पर, डेवलपर सभी आधुनिक वाक्यविन्यास को ES5 में बदलने के लिए @ babel / preset-env का उपयोग करते हैं।

इस पूर्व निर्धारित के साथ, अतुल्यकालिक कार्यों के परिवर्तनों की पाइपलाइन इस तरह दिखती है:
स्रोत अतुल्यकालिक फ़ंक्शन -> जनरेटर -> पुनर्योजी-रनटाइम का उपयोग करके फ़ंक्शन

उदाहरण

1. मूल अतुल्यकालिक समारोह

const test = async () => { await fetch('/test-api/', { method: 'GET' }); }

2. जनक

 function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } const test = (() => { var _ref = _asyncToGenerator(function* () { yield fetch('/test-api/', { method: 'GET' }); }); return function test() { return _ref.apply(this, arguments); }; })();

3. पुनर्योजी-रनटाइम का उपयोग करके फ़ंक्शन

 'use strict'; function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; } var test = function () { var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: _context.next = 2; return fetch('/test-api/', { method: 'GET' }); case 2: case 'end': return _context.stop(); } } }, _callee, undefined); })); return function test() { return _ref.apply(this, arguments); }; }();

फास्ट-एसिंक्स के साथ, पाइपलाइन को सरल किया जाता है:
स्रोत अतुल्यकालिक समारोह -> वादे का उपयोग कर समारोह

उदाहरण

1. मूल अतुल्यकालिक समारोह

 const test = async () => { await fetch('/test-api/', { method: 'GET' }); }

2. वादों का उपयोग कर समारोह

 var test = function test() { return new Promise(function ($return, $error) { return Promise.resolve(fetch('/test-api/', { method: 'GET' })).then(function ($await_1) { try { return $return(); } catch ($boundEx) { return $error($boundEx); } }, $error); }); };

इसके कारण, अब हमारे पास क्लाइंट पर पुनर्योजी-रनटाइम नहीं है और परिवर्तनों से अतिरिक्त आवरण हैं।

अपने प्रोजेक्ट में तेज़-एस्किंट लाने के लिए, आपको यह करना होगा:

1. इसे स्थापित करें

 npm i fast-async

2. कोलाहल के विन्यास को अद्यतन करें

 // .babelrc.js module.exports = { "presets": [ ["@babel/preset-env", { /* ... */ "exclude": ["transform-async-to-generator", "transform-regenerator"] }] ], /* ... */ "plugins": [ ["module:fast-async", { "spec": true }], /* ... */ ] }

मेरे लिए, इस अनुकूलन ने js फ़ाइलों का आकार 3.2% घटा दिया। एक तिपहिया, लेकिन अच्छा :)

2. ढीले परिवर्तनों का उपयोग करें

विशेष कॉन्फ़िगरेशन के बिना, @ babel / preset-env विनिर्देशन के लिए कोड को यथासंभव संभव बनाने की कोशिश करता है।

लेकिन, सबसे अधिक संभावना है, आपका कोड इतना बुरा नहीं है और ES6 + विनिर्देश के सभी संभावित चरम मामलों का उपयोग नहीं करता है। फिर प्रीसेट-एनवी के लिए ढीले परिवर्तनों को सक्षम करके सभी अतिरिक्त ओवरहेड को हटाया जा सकता है:

 // .babelrc.js module.exports = { "presets": [ ["@babel/preset-env", { /* ... */ "loose": true, }] ], /* ... */ }

यह कैसे काम करता है इसका एक उदाहरण यहां मिल सकता है ।

मेरी परियोजना में, इस बंडल का आकार 3.8% कम हो गया।

3. अपने हाथों से जेएस और सीएसएस मिनिफिकेशन कॉन्फ़िगर करें

मंत्रियों के लिए डिफ़ॉल्ट सेटिंग्स में केवल वे परिवर्तन होते हैं जिन्हें प्रोग्रामर द्वारा तोड़ा नहीं जा सकता। लेकिन हम समस्याओं का कारण प्यार करते हैं?
जेएस मिनिफायर और अपने सीएसएस मिनिफायर (मैं cssnano का उपयोग करें ) के लिए सेटिंग्स पढ़ने की कोशिश करें।

डॉक्स का अध्ययन करने के बाद, मैंने यह कॉन्फिगर किया:

 // webpack.config.js const webpackConfig = { /* ... */ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { unsafe: true, inline: true, passes: 2, keep_fargs: false, }, output: { beautify: false, }, mangle: true, }, }), new OptimizeCSSPlugin({ cssProcessorOptions: { "preset": "advanced", "safe": true, "map": { "inline": false }, }, }), ], }, }; /* ... */

नतीजतन, जेएस फाइलों का आकार 1.5%, और सीएसएस - 2% कम हो गया।

शायद आप बेहतर कर सकते हैं?

UPD 01/11/2019: UglifyJsPlugin को हटा दिया गया है, वेबपैक अब TerserWebpackPlugin का उपयोग करता है। इसका उपयोग करें।

4. अनावश्यक निर्भरता को दूर करने के लिए नल-लोडर का उपयोग करें

Gsap डेवलपर्स के पास एनिमेशन बनाने के लिए एक बेहतरीन लाइब्रेरी है। लेकिन 2008 से उत्पन्न होने के कारण, कुछ विशेषताएं इसमें बनी रहीं।

अर्थात् , यह एक । इसके लिए धन्यवाद, ट्वीनमैक्स 5 प्लगइन्स और ईज़ीपैक खींचता है, जो पूरी तरह से वैकल्पिक हैं।

मैंने अपने अंदर तीन निरर्थक प्लग देखे और उन्हें नल-लोडर का उपयोग करके काट दिया:

 // webpack.config.js const ignoredGSAPFiles = ['BezierPlugin', 'DirectionalRotationPlugin', 'RoundPropsPlugin']; const webpackConfig = { /* ... */ module: { rules: [ /* ... */ { test: /\.js$/, include: ignoredGSAPFiles.map(fileName => resolve('node_modules/gsap/' + fileName)), loader: 'null-loader', }, ] }, }; /* ... */

और 106 kb 86 में बदल गया। हाँ!

नल-लोडर का उपयोग अभी भी अनावश्यक पॉलीफिल को हटाने के लिए किया जा सकता है जो पुस्तकालय लेखकों ने सावधानीपूर्वक हमारे लिए लगाया है।

अपने वेबपैक एप्लिकेशन को अनुकूलित करने के लिए 4 टिप्स

1. रीजेनरेटर-रनटाइम के बजाय फास्ट-एसिंक्स का उपयोग करें

2. ढीले परिवर्तनों का उपयोग करें

3. अपने हाथों से जेएस और सीएसएस मिनिफिकेशन कॉन्फ़िगर करें

4. अनावश्यक निर्भरता को दूर करने के लिए नल-लोडर का उपयोग करें

More articles: