ब्राउज़र के साथ Async/Lazy Load Vue घटक

Question

मैं एक laravel परियोजना में मेरी app.js फ़ाइल (ब्राउज़र/vueify के माध्यम से elixir का उपयोग कर) में कई Vue.js घटकों को लोड करने की कोशिश कर रहा हूँ।

प्रत्येक घटक को एक बार में लोड करने के बजाय, जब मैं vue router का उपयोग कर आवश्यक हो तो मैं व्यक्तिगत व्यू घटकों को आलसी लोड करना चाहता हूं।

मैं कहां से partition bundle json फ़ाइल सेट कर सकता हूं और कैसे यह संरचित किया जाना चाहिए?

फिलहाल, Ive बाहर बंधे निम्नलिखित एक अपने मुख्य app.js फ़ाइल:

import Vue from 'vue'; 
import Resource from 'vue-resource'; 
import VueRouter from 'vue-router'; 

// These are the components that I wish to lazy load: 
// import Users from './components/Users.vue'; 
// import Sales from './components/Sales.vue'; 
// import Projects from './components/Projects.vue'; 
// import Dashboard from './components/Dashboard.vue'; 
// import Receipts from './components/Receipts.vue'; 

Vue.use(Resource); 
Vue.use(VueRouter); 

var router = new VueRouter(); 

router.map({ 
    '/async': { 
    component: function (resolve) { 
     loadjs(['./components/Users.vue'], resolve) 
    } 
    } 
}) 

यहाँ मैं कहाँ अटक कर रहा हूँ:

1. कैसे हम आलसी लोड सब करने router.map फ़ंक्शन में ऊपर सूचीबद्ध घटक।
2. उपरोक्त के लिए partition table json फ़ाइल कैसे सेट करें, और इसे कहां से सहेजा जाना चाहिए?

Answer 1

प्रलेखन https://vuejs.org/v2/guide/components.html#Async-Components

आप एक Browserify उपयोगकर्ता कि async घटकों का उपयोग करना चाहते हैं, तो से, इसके निर्माता दुर्भाग्य से बना दिया है यह स्पष्ट है कि async लोड हो रहा है "कुछ नहीं है कि Browserify कभी भी समर्थन करेगा। " आधिकारिक तौर पर, कम से कम। ब्राउज़र समुदाय को कुछ कामकाज मिल गए हैं, जो मौजूदा और जटिल अनुप्रयोगों के लिए सहायक हो सकते हैं। अन्य सभी परिदृश्यों के लिए, हम अंतर्निहित, प्रथम-श्रेणी एसिंक समर्थन के लिए बस वेबपैक का उपयोग करने की सलाह देते हैं।