Я поделюсь вашими пожеланиями по поводу «максимально бережной» кодовой базы и поэтому сделал этот простой пример кода ниже (также доступен по адресу https://codesandbox.io/embed/64j8pypr4k).
Я тоже не Vue poweruser, но при исследовании я подумал отри возможности:
- динамический
import с, require js, - генерируется JS старой школы
<script src /> include.
Похоже, что последний самый простой и требует наименьших усилий: D Вероятно, не лучшая практика и, вероятно, скоро устареет (по крайней мере, с поддержкой динамического импорта).
NB: Этот пример удобен для более свежихбраузеры (с собственными функциями Promises, Fetch, Arrow ...). Итак - используйте для тестирования новейший Chrome или Firefox :) Поддержка старых браузеров может быть реализована с некоторыми полифилами, рефакторингом и т. д. Но это добавит многое в кодовую базу ...
Итак - динамически загружаемые компоненты, по требованию (и не включены ранее):
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue lazyload test</title>
<style>
html,body{
margin:5px;
padding:0;
font-family: sans-serif;
}
nav a{
display:block;
margin: 5px 0;
}
nav, main{
border:1px solid;
padding: 10px;
margin-top:5px;
}
.output {
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/simple">Simple component</router-link>
<router-link to="/complex">Not sooo simple component</router-link>
</nav>
<main>
<router-view></router-view>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.min.js"></script>
<script>
function loadComponent(componentName, path) {
return new Promise(function(resolve, reject) {
var script = document.createElement('script');
script.src = path;
script.async = true;
script.onload = function() {
var component = Vue.component(componentName);
if (component) {
resolve(component);
} else {
reject();
}
};
script.onerror = reject;
document.body.appendChild(script);
});
}
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: {
template: '<div>Home page</div>'
},
},
{
path: '/simple',
component: function(resolve, reject) {
loadComponent('simple', 'simple.js').then(resolve, reject);
}
},
{ path: '/complex', component: function(resolve, reject) { loadComponent('complex', 'complex.js').then(resolve, reject); }
}
]
});
var app = new Vue({
el: '#app',
router: router,
});
</script>
</body>
</html>
simple.js :
Vue.component("simple", {
template: "<div>Simple template page loaded from external file</div>"
});
complex.js :
Vue.component("complex", {
template:
"<div class='complex-content'>Complex template page loaded from external file<br /><br />SubPage path: <i>{{path}}</i><hr /><b>Externally loaded data with some delay:</b><br /> <span class='output' v-html='msg'></span></div>",
data: function() {
return {
path: this.$route.path,
msg: '<p style="color: yellow;">Please wait...</p>'
};
},
methods: {
fetchData() {
var that = this;
setTimeout(() => {
/* a bit delay to simulate latency :D */
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then(response => response.json())
.then(json => {
console.log(json);
that.msg =
'<p style="color: green;">' + JSON.stringify(json) + "</p>";
})
.catch(error => {
console.log(error);
that.msg =
'<p style="color: red;">Error fetching: ' + error + "</p>";
});
}, 2000);
}
},
created() {
this.fetchData();
}
});
Как вы можете видеть - функция loadComponent() делает "волшебную" вещь загрузки компонентов здесь.
Так что это работает, но, вероятно, это не лучшее решение, в отношении (по крайней мере) следующего:
- вставка тегов с помощью JS может рассматриваться как проблема безопасности вближайшее будущее, производительность
- - синхронная загрузка файлов блокирует поток (это может быть серьезной проблемой в жизни приложения),
- Я не тестировал кэширование и т. д. Может быть реальнымпроблема в производстве,
- Вы теряете всю прелесть компонентов (Vue) - таких как CSS, SCOP, HTML и JS, которые могут автоматически связываться с Webpack или чем-то подобным,
- Вы теряете компиляцию / перенос Babel,
- Горячая замена модуля (и сохранение состояния и т. Д.) - прошло, я думаю,
- Я, вероятно, забыл о других проблемах, которые очевидны для пожилых людей: D
Надеюсь, я тебе все же помог: D