JavaScript ਮਿਨੀਫਾਈ ਕਰੋ _

JavaScript ਮਿਨੀਫਿਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ

Terser ਤੁਹਾਡੇ ਕੋਡ ਦੇ Abstract Syntax Tree ਤੇ ਚਾਰ ਪੜਾਵਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ। ਹਰ ਪੜਾਅ ਸੁਤੰਤਰ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਬਾਕੀਆਂ ਨੂੰ ਤੋੜੇ ਬਿਨਾਂ ਕੋਈ ਵੀ ਚਾਲੂ ਜਾਂ ਬੰਦ ਕਰ ਸਕਦੇ ਹੋ।

1. ਪਾਰਸ. Terser ਤੁਹਾਡੇ JavaScript ਨੂੰ AST ਵਿੱਚ ਪਾਰਸ ਕਰਦਾ ਹੈ। ਕੋਈ ਵੀ ਸਿੰਟੈਕਸ ਗਲਤੀ ਇੱਥੇ ਟੋਕਨ ਅਤੇ ਲਾਈਨ ਨਾਲ ਦਿਖਦੀ ਹੈ ਜਿਸ ਕਾਰਨ ਹੋਈ, ਤਾਂ ਜੋ ਕੋਈ ਟ੍ਰਾਂਸਫਾਰਮੇਸ਼ਨ ਚੱਲਣ ਤੋਂ ਪਹਿਲਾਂ ਅਸਲ ਸਮੱਸਿਆ ਮਿਲੇ। ਪਾਰਸਰ ਨਵੀਨਤਮ ਸਟੇਜ-4 ਪ੍ਰਸਤਾਵਾਂ ਤੱਕ ਹਰ ਮਿਆਰੀ ECMAScript ਢਾਂਚੇ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ।
2. ਕੰਪ੍ਰੈੱਸ. ਕੰਪ੍ਰੈੱਸਰ AST ਤੇ ਚੱਲਦਾ ਹੈ ਅਤੇ ਦਰਜਨਾਂ ਅਰਥ-ਸੁਰੱਖਿਅਤ ਟ੍ਰਾਂਸਫਾਰਮ ਲਾਗੂ ਕਰਦਾ ਹੈ: ਕਾਂਸਟੈਂਟ ਫੋਲਡਿੰਗ, ਡੈੱਡ-ਬ੍ਰਾਂਚ ਹਟਾਉਣਾ, ਛੋਟੇ ਸ਼ੁੱਧ ਫੰਕਸ਼ਨਾਂ ਦੀ ਇਨਲਾਈਨਿੰਗ, ਲਗਾਤਾਰ var ਘੋਸ਼ਣਾਵਾਂ ਦਾ ਸੰਕੁਚਨ, ਅਤੇ ਬਰਾਬਰੀ ਦੇ ਸਟੇਟਮੈਂਟ ਰੂਪਾਂ ਨੂੰ ਮੁੜ-ਲਿਖਣਾ (if/else ਨੂੰ ਟਰਨਰੀ ਵਿੱਚ, ਤੁਲਨਾ-ਚੇਨ ਛੋਟਾ ਕਰਨਾ, ਕੰਡੀਸ਼ਨਲ ਰਿਟਰਨ ਸੰਕੁਚਨ)। ਹਰ ਟ੍ਰਾਂਸਫਾਰਮ ਸਿਧਾਂਤਕ ਤੌਰ ਤੇ ਉਲਟਾਉਣਯੋਗ ਹੈ; ਕੰਪ੍ਰੈੱਸਰ ਕਦੇ ਵੀ ਦਿੱਖ ਵਿਵਹਾਰ ਨਹੀਂ ਬਦਲਦਾ।
3. ਮੈਂਗਲ. ਮੈਂਗਲਰ ਹਰ ਸਕੋਪ ਵਿੱਚ ਲੋਕਲ ਬਾਈਂਡਿੰਗਾਂ ਦਾ ਨਾਮ ਸਭ ਤੋਂ ਛੋਟੇ ਵਿਲੱਖਣ ਪਛਾਣਕਰਤਾਵਾਂ (a, b, c, …) ਤੇ ਰੱਖਦਾ ਹੈ। ਸਿਰਫ਼ ਉਹ ਨਾਮ ਜੋ ਮੌਡਿਊਲ ਬਾਊਂਡਰੀ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾ ਸਕਦੇ ਦਾ ਨਾਮ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਐਕਸਪੋਰਟ ਕੀਤੀਆਂ ਬਾਈਂਡਿੰਗਾਂ, ਪ੍ਰਾਪਰਟੀ ਕੁੰਜੀਆਂ, ਅਤੇ ਗਲੋਬਲ ਹਵਾਲੇ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੇ ਹਨ। ਨਤੀਜਾ ਕਿਸੇ ਵੀ ਪੜਾਅ ਦੀ ਸਭ ਤੋਂ ਵੱਡੀ ਸਿੰਗਲ ਬਾਈਟ ਬੱਚਤ ਹੈ।
4. ਰੈਂਡਰ. Terser ਟ੍ਰਾਂਸਫਾਰਮ ਕੀਤੇ AST ਨੂੰ ਵ੍ਹਾਈਟਸਪੇਸ ਸੰਕੁਚਿਤ ਅਤੇ ਸਟੇਟਮੈਂਟ ਵੱਖਰੇਵੇਂ ਘੱਟੋ-ਘੱਟ ਨਾਲ JavaScript ਸਟ੍ਰਿੰਗ ਤੇ ਵਾਪਸ ਪ੍ਰਿੰਟ ਕਰਦਾ ਹੈ। ਟਿੱਪਣੀਆਂ ਹਟਾਈਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜਦੋਂ ਤੱਕ ਕਿ ਲਾਇਸੈਂਸ-ਰੱਖੋ ਟੌਗਲ /*! … */ ਬਲਾਕ ਨਾ ਰੱਖੇ, ਜੋ ਜ਼ਿਆਦਾਤਰ CDN ਲਾਇਸੈਂਸਾਂ ਲਈ ਲੋੜੀਂਦੇ ਹਨ।

JavaScript ਮਿਨੀਫਾਈ ਕਿਉਂ ਕਰੋ

• ਤੇਜ਼ ਪੇਜ ਲੋਡ. ਛੋਟੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਜਲਦੀ ਪਾਰਸ ਅਤੇ ਚੱਲਦੀਆਂ ਹਨ। 4G ਮੋਬਾਈਲ ਕਨੈਕਸ਼ਨ ਤੇ 40 ਪ੍ਰਤੀਸ਼ਤ ਬਾਈਟ ਘਟੌਤੀ Time to Interactive ਤੋਂ ਅਸਲ ਸਕਿੰਟ ਘਟਾਉਂਦੀ ਹੈ, ਜੋ Google ਦੇ PageSpeed Insights ਦਾ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਮੈਟ੍ਰਿਕ ਹੈ।
• CDN ਐਗਰੈੱਸ ਬਿੱਲ ਘੱਟ. CloudFront, Cloudflare, ਅਤੇ Fastly ਹਰ ਗੀਗਾਬਾਈਟ ਐਗਰੈੱਸ ਤੇ ਬਿੱਲ ਕਰਦੇ ਹਨ। ਲੱਖਾਂ ਮਹੀਨਾਵਾਰ ਪੇਜ ਵਿਊਜ਼ ਵਿੱਚ 40 ਪ੍ਰਤੀਸ਼ਤ ਸਕ੍ਰਿਪਟ ਘਟੌਤੀ ਅਸਲ ਬੱਚਤ ਬਣਾਉਂਦੀ ਹੈ। ਗਣਿਤ gzip ਅਤੇ brotli ਤੋਂ ਬਾਅਦ ਵੀ ਸਹੀ ਰਹਿੰਦਾ ਹੈ।
• ਇਹ ਮਿਨੀਫਾਇਰ ਤੁਹਾਡੇ ਪੇਜ ਤੇ ਬੋਝ ਨਹੀਂ ਪਾਉਂਦਾ. Terser ਅਨਕੰਪ੍ਰੈੱਸਡ ~1 MB ਹੈ। ਜ਼ਿਆਦਾਤਰ ਔਨਲਾਈਨ ਮਿਨੀਫਾਇਰ ਪੇਜ ਲੋਡ ਤੇ ਪੂਰੀ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ਿਪ ਕਰਦੇ ਹਨ, ਜੋ ਉਹਨਾਂ ਦੇ ਆਪਣੇ Lighthouse ਸਕੋਰ ਨੂੰ ਡੁਬੋ ਦਿੰਦਾ ਹੈ ਅਤੇ ਯੂਜ਼ਰ ਦੇ ਕੁਝ ਟਾਈਪ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਹੀ ਪੰਨੇ ਨੂੰ ਸੁਸਤ ਮਹਿਸੂਸ ਕਰਾਉਂਦਾ ਹੈ। ਇਹ ਪੇਜ Terser ਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ ਲੇਜ਼ੀ-ਲੋਡ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ Minify ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਜਾਂ ਲਾਈਵ ਮੋਡ ਚਾਲੂ ਕਰਦੇ ਹੋ — ਇਸ ਲਈ ਸ਼ੁਰੂਆਤੀ ਰੈਂਡਰ ਉਹਨਾਂ Core Web Vitals ਥ੍ਰੈਸ਼ਹੋਲਡਾਂ ਤੋਂ ਹੇਠਾਂ ਰਹਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਦਾ ਵਾਅਦਾ ਸਾਧਨ ਖੁਦ ਕਰਦਾ ਹੈ।
• Core Web Vitals ਪਾਸ ਕਰੋ. Lighthouse ਅਤੇ PageSpeed Insights ਵੱਡੇ JavaScript ਨੂੰ ਮਾੜੇ Total Blocking Time ਦਾ ਸਿੱਧਾ ਕਾਰਨ ਮੰਨਦੇ ਹਨ। ਵੈਂਡਰ ਲਾਇਬ੍ਰੇਰੀਆਂ ਅਤੇ ਐਪਲੀਕੇਸ਼ਨ ਬੰਡਲ ਮਿਨੀਫਾਈ ਕਰਨਾ Lighthouse ਆਡਿਟ ਵਿੱਚ ਸਭ ਤੋਂ ਤੇਜ਼ ਜਿੱਤ ਹੈ।

ਆਮ ਵਰਤੋਂ

JavaScript ਮਿਨੀਫਿਕੇਸ਼ਨ ਆਧੁਨਿਕ ਵੈੱਬ ਪ੍ਰੋਜੈਕਟ ਦੇ ਲਗਭਗ ਹਰ ਪੜਾਅ ਤੇ ਦਿਖਦੀ ਹੈ।

• ਪ੍ਰੀ-ਕਮਿਟ ਹੁੱਕਸ: ਰੇਪੋ ਵਿੱਚ ਕਮਿਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਵਿਅਕਤੀਗਤ ਉਪਯੋਗਤਾ ਸਕ੍ਰਿਪਟਾਂ ਮਿਨੀਫਾਈ ਕਰੋ ਤਾਂ ਜੋ ਕਮਿਟ ਆਰਟੀਫੈਕਟ ਉਤਪਾਦਨ-ਤਿਆਰ ਹੋਵੇ।
• ਥਰਡ-ਪਾਰਟੀ ਵਿਜੇਟ ਆਡਿਟ: ਵੈਂਡਰ ਦੇ ਐਂਬੈੱਡ ਸਨਿੱਪਟ ਪੇਸਟ ਕਰੋ ਅਤੇ ਜਾਂਚੋ ਕਿ ਇਹ ਪਹਿਲਾਂ ਤੋਂ ਮਿਨੀਫਾਈਡ ਹੈ ਜਾਂ ਲੱਖਾਂ ਯੂਜ਼ਰਾਂ ਨੂੰ ਪਰੋਸਣ ਤੋਂ ਪਹਿਲਾਂ ਹੋਰ ਛੋਟਾ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
• ਲੀਗੇਸੀ ਸਕ੍ਰਿਪਟ ਸਫਾਈ: ਪੁਰਾਣੇ jQuery ਪਲੱਗਇਨ ਅਤੇ ਹੱਥ-ਲਿਖਤ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਸਰੋਤ ਟ੍ਰੀ ਛੂਹੇ ਬਿਨਾਂ ਕੰਪ੍ਰੈੱਸ ਕਰੋ।

ਇੱਕ ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ

ਇੱਕ ਛੋਟਾ ਫੰਕਸ਼ਨ ਲਓ: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — ਟਿੱਪਣੀ ਸਮੇਤ ਲਗਭਗ 130 ਬਾਈਟਸ। Mangle ਅਤੇ Compress ਦੋਵੇਂ ਚਾਲੂ ਨਾਲ ਉੱਪਰ ਪੇਸਟ ਕਰੋ। ਆਉਟਪੁੱਟ ਲਗਭਗ function add(n,o){return n+o}console.log(add(1,2)); ਤੱਕ ਛੋਟੀ ਹੁੰਦੀ ਹੈ — ਲਗਭਗ 55 ਬਾਈਟਸ, 58 ਪ੍ਰਤੀਸ਼ਤ ਘਟੌਤੀ। ਫੰਕਸ਼ਨ ਨਾਮ add ਬਚਦਾ ਹੈ ਕਿਉਂਕਿ ਇਸਦਾ ਹਵਾਲਾ console.log ਕਾਲ ਵਿੱਚ ਹੈ; ਪੈਰਾਮੀਟਰ ਨਾਮ firstNumber ਅਤੇ secondNumber ਸਿੰਗਲ ਅੱਖਰਾਂ ਤੱਕ ਛੋਟੇ ਹੁੰਦੇ ਹਨ।

FAQ

ਕੀ ਇਹ ਮੇਰੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ?

ਹਾਂ। Terser ਪਹਿਲੀ ਵਾਰ Minify ਕਲਿੱਕ ਕਰਨ ਜਾਂ ਲਾਈਵ ਮੋਡ ਚਾਲੂ ਕਰਨ ਤੇ ਲੇਜ਼ੀ-ਲੋਡ ਹੁੰਦਾ ਹੈ — ਲਗਭਗ 200 KB ਕੰਪ੍ਰੈੱਸਡ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਕੈਸ਼ ਵਿੱਚ ਆਉਂਦਾ ਹੈ, ਫਿਰ ਕੁਝ ਹੋਰ ਡਾਊਨਲੋਡ ਨਹੀਂ ਹੁੰਦਾ। ਤੁਹਾਡਾ ਕੋਡ ਕਦੇ ਪੇਜ ਨਹੀਂ ਛੱਡਦਾ।

ਨਾਮ ਮੈਂਗਲਿੰਗ ਕੀ ਹੈ ਅਤੇ ਕੀ ਇਹ ਸੁਰੱਖਿਅਤ ਹੈ?

ਮੈਂਗਲਿੰਗ ਲੋਕਲ ਵੇਰੀਏਬਲਾਂ ਦਾ ਨਾਮ ਸਿੰਗਲ ਅੱਖਰਾਂ ਤੇ ਰੱਖਦੀ ਹੈ ਤਾਂ ਜੋ ਬਾਈਟਸ ਬਚਾਏ ਜਾਣ। ਇਹ ਸਵੈ-ਸੰਪੂਰਨ ਸਕ੍ਰਿਪਟਾਂ ਅਤੇ IIFE ਬੰਡਲਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਹੈ। ਇਹ ਉਹਨਾਂ ਸਕ੍ਰਿਪਟਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਜੋ ਗਲੋਬਲ ਨਾਮ ਨਾਲ ਐਕਸਪੋਜ਼ ਕਰਦੀਆਂ ਹਨ (ਜਿਵੇਂ window.myLib = …)। ਸ਼ੱਕ ਹੋਣ ਤੇ Mangle ਬੰਦ ਕਰੋ।

ਮਿਨੀਫਿਕੇਸ਼ਨ ਤੋਂ ਬਾਅਦ ਮੇਰਾ ਕੋਡ ਕਿਉਂ ਟੁੱਟਿਆ?

ਤਿੰਨ ਆਮ ਕਾਰਨ: eval ਜਾਂ with ਸਟ੍ਰਿੰਗ ਨਾਲ ਵੇਰੀਏਬਲਾਂ ਦਾ ਹਵਾਲਾ; Function.name ਜਾਂ arguments.callee ਰੀਡਸ ਜੋ ਅਸਲ ਪਛਾਣਕਰਤਾ ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ; ਜਾਂ ਉਹ ਗਲੋਬਲ ਜਿਨ੍ਹਾਂ ਦਾ ਨਾਮ ਬਦਲਿਆ ਗਿਆ। ਨਾਮਕਰਨ ਜਾਂ Compress ਟ੍ਰਾਂਸਫਾਰਮ ਕਾਰਨ ਵੱਖ ਕਰਨ ਲਈ ਪਹਿਲਾਂ Mangle ਬੰਦ ਕਰੋ।

ਕੀ ਇਹ ਆਧੁਨਿਕ ਸਿੰਟੈਕਸ (ES2020+) ਸਪੋਰਟ ਕਰਦਾ ਹੈ?

ਹਾਂ। ECMAScript ਟਾਰਗੇਟ ES2020 ਜਾਂ Next ਤੇ ਸੈੱਟ ਕਰੋ ਅਤੇ Terser ਵਿਕਲਪਿਕ ਚੇਨਿੰਗ, ਨਲਿਸ਼ ਕੋਲੈਸਿੰਗ, ਟਾਪ-ਲੈਵਲ await, ਅਤੇ ਲਾਜੀਕਲ-ਅਸਾਈਨਮੈਂਟ ਓਪਰੇਟਰ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ। ES5 ਤੇ ਸੈੱਟ ਕਰੋ ਅਤੇ Terser ਜਿੱਥੇ ਹੋ ਸਕੇ ਡਾਊਨ-ਕੰਪਾਈਲ ਕਰਦਾ ਹੈ, ਪਰ ਇਹ ਪੂਰਾ ਟ੍ਰਾਂਸਪਾਈਲਰ ਨਹੀਂ ਹੈ — ES5 ਜੋ ਨਹੀਂ ਦਰਸਾ ਸਕਦਾ ਉਸ ਲਈ Babel ਵਰਤੋ।

Terser ਨਾਲ ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ JavaScript ਮਿਨੀਫਿਕੇਸ਼ਨ ਬਿਨਾਂ ਬਿਲਡ ਟੂਲ ਜੋੜੇ ਉਤਪਾਦਨ-ਗੁਣਵੱਤਾ ਆਉਟਪੁੱਟ ਦਿੰਦੀ ਹੈ। ਸਕ੍ਰਿਪਟ ਪੇਸਟ ਕਰੋ, ECMAScript ਟਾਰਗੇਟ ਚੁਣੋ, ਨਤੀਜਾ ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਕੁਝ ਵੀ ਅਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ, ਕੋਈ ਖਾਤਾ ਨਹੀਂ, ਕੋਈ ਬਿਲਡ ਪਾਈਪਲਾਈਨ ਨਹੀਂ।