जो पृष्ठ लोड

Question

पर जावास्क्रिप्ट फ़ाइलों का उपयोग नहीं किया जा रहा है, क्या यह पता लगाना संभव है कि वेब पेज पर कौन सी जावास्क्रिप्ट फ़ाइलों का उपयोग नहीं किया जाता है, बिना कंसोल लॉग जोड़ने या डीबग या उन्हें हटाने के लिए उन्हें हटाने के लिए क्या किया जाता है?

मैं एक उपकरण, या कमांड लाइन स्क्रिप्ट या के लिए देख रहा हूँ फ़ायरफ़ॉक्स प्लगइन आदि

उदाहरण के लिए, मान लीजिए कि मैं इन शीर्ष लेख में शामिल किया है करते हैं:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/functions.js"></script> 
<script type="text/javascript" src="js/validation.js"></script> 
<script type="text/javascript" src="js/something.js"></script> 

पृष्ठ पर, कॉल केवल functions.js, validation.js और jquery.js में फ़ंक्शंस में किए गए हैं। मुझे कैसे पता चलेगा कि something.js का उपयोग नहीं किया जाता है और इसलिए हेडर से सुरक्षित रूप से हटाया जा सकता है?

मैंने फायरबग, क्रोम कंसोल, वाईस्लो और सर्वर लॉग जैसी चीजों के माध्यम से rooting करने की कोशिश की है, लेकिन ये सभी मुझे बताते हैं कि कौन सी स्क्रिप्ट लोड हो गई हैं, यानी उन सभी को, जिनका उपयोग नहीं किया गया है।

Answer 1

AFAIK कोई आसान नहीं है "यह फ़ाइल उपयोग में है/उपयोग में नहीं है" पहचान तंत्र, क्योंकि जावास्क्रिप्ट में चीजों को कॉल, विस्तार और संदर्भित करने के कई तरीके हैं।

फ़ंक्शन कॉल करने के कई तरीके हैं, उदा। click किसी तत्व की घटना, eval() कथन ... आप किसी स्क्रिप्ट फ़ाइल में किसी मौजूदा वर्ग के प्रोटोटाइप को विस्तारित कर सकते हैं ... आदि। इसके अलावा, आप एक निश्चित से फ़ंक्शन संदर्भों की तुलना में AJAX के माध्यम से नया मार्कअप ला सकते हैं सामग्री को लाने के बिना स्वचालित रूप से परीक्षण करने के लिए असंभव कुछ शामिल है।

जब तक कोई ऐसा उपकरण नहीं लेता है जो वास्तव में इस तरह से निपटता है (मैं यह नहीं कह रहा कि यह असंभव है, बस इतना मुश्किल है) मैं कहूंगा कि यह एक अच्छा आईडीई के साथ मैन्युअल रूप से काम कर रहा है और खोज फ़ंक्शन सबसे अच्छा तरीका है इसके बारे में जाने के लिए।

Answer 2

इस पर एक अलग दिशा से आ रहा है, आप जावास्क्रिप्ट पुस्तकालयों को लोड करने (आलसी) का उपयोग करने में देख सकते हैं। मैं यह नहीं कह सकता है कि कैसे उचित यह अपनी स्थिति में होगा, लेकिन मैं पिछले हफ्ते में इन दो का उल्लेख देखा है, लेकिन उनमें से या तो उपयोग नहीं किया है:

• http://plugins.jquery.com/project/lazy (केवल jQuery के आलसी लोड करने के लिए प्लगइन्स?)
• http://labjs.com/ (यकीन नहीं करता है, तो यह करता है आलसी लोड हो रहा है?)

Answer 3

जवाब में मेरे अपने प्रश्न 7 साल बाद के लिए पर हो रही करने के लिए, क्रोम देव उपकरण अब वास्तव में यह सुविधा है! https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Answer 4

केवल 7 साल लगे :) यह भी इंगित करना चाहता था कि आप इसे Navalia के साथ स्वचालित कर सकते हैं: https://github.com/joelgriffith/navalia।

import { Chrome } from 'navalia'; 
const chrome = new Chrome(); 

async function checkCoverage() { 
    await chrome.goto('http://joelgriffith.net/', { coverage: true }); 
    const stats = await chrome.coverage('http://joelgriffith.net/main.bundle.js'); 
    console.log(stats); // Prints { total: 45913, unused: 5572, percentUnused: 0.12135996340905626 } 
    chrome.done(); 
} 

checkCoverage(); 

अधिक यहाँ https://joelgriffith.github.io/navalia/Chrome/coverage/:

यहां एक त्वरित उदाहरण है।