Next.js: ~ 50% अप्रयुक्त बाइट्स app.js में क्रोम देव टूल्स कवरेज के साथ

को निर्मित 6 अप्रैल 2017 · 3टिप्पणियाँ · स्रोत: vercel/next.js

screen shot 2017-04-06 at 02 23 23

उत्पादन में, बिल्कुल।

CSS के अलावा (पहली बार styled-jsx का उपयोग करते हुए और साझा शैलियों के डिज़ाइन में सुधार करने या styletron जैसी किसी चीज़ का उपयोग करने की आवश्यकता होगी) - क्या मैंने स्वचालित कोड विभाजन सुविधा को गलत समझा है?

कुछ संदर्भ देने के लिए, मैं प्रत्येक पृष्ठ को लपेटने के लिए एक एचओसी का उपयोग करता हूं, और मैं दोनों विधियों और प्रोपों को पारित कर रहा हूं जो जरूरी नहीं कि प्रत्येक पृष्ठ द्वारा उपयोग किया जाए। इसके अतिरिक्त: मैं कुछ आयातों के साथ इधर-उधर लापरवाह रहा हो सकता है; मैं री-बेस का उपयोग करता हूं जो वर्तमान में सभी फायरबेस आयात करता है (मेरे उपयोग के मामले में आवश्यक नहीं)।

क्या मैं संभवतः वेबपैक के automatic code splitting को static analysis and tree shaking एक là रोलअप मिला रहा हूँ? यदि ऐसा है तो,

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

धन्यवाद!

स्रोत

ghost

सबसे उपयोगी टिप्पणी

उस धागे से जुड़ा हुआ है, यह स्पष्ट रूप से परीक्षण करने के लिए एक उपयोगिता है कि वेबपैक में पेड़ हिलना ठीक से होता है या नहीं:
https://github.com/halt-hammerzeit/es6-tree-shaking-test

sedubois 6 अप्रैल 2017

👍2 🎉1

सभी 3 टिप्पणियाँ

मुझे लगता है कि ऐसा इसलिए है क्योंकि वेबपैक पेड़-हिलाने को कैसे संभालता है।
इसे ES2015 मॉड्यूल की जरूरत है। मुझे उम्मीद है कि रिएक्ट वह प्रदान नहीं करता है और इसीलिए ऐसा है।
लेकिन मैं यहां प्रयोग करना चाहूंगा। किसी भी विचार/सुधार का स्वागत है।