实现基于最新chrome的动态按需加载组件
实现基于最新chrome的动态按需加载组件
mafeifan
发布于 2018-09-10 12:00:28
发布于 2018-09-10 12:00:28
chrome63 版本后支持动态import 加载js https://developers.google.com/web/updates/2017/12/nic63#dynamic
下面的例子需要通过服务器打开才生效哦，比如本地localhost开头的..
例1
有一个 js 文件和 html 文件，现在可以实现不借助任何东西在浏览器里实现点击页面上的按钮加载该 js。
export default {
open() {
return alert('I am opening')
}
}html文件
<button id="btn">点击动态加载js</button>
<script>
const btn = document.querySelector("#btn")
btn.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.default.open();
})
.catch(error => {
/* Error handling */
});
});
</script>注意：import方法 返回的是一个promise对象
例2 vue加载动态路由组件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<nav>
<!-- lazy load component -->
<a href="/pages/BooksPage.js" @click.prevent="navigate">Books</a>
<a href="/pages/MoviesPage.js" @click.prevent="navigate">Movies</a>
<a href="/pages/GamesPage.js" @click.prevent="navigate">Games</a>
</nav>
<component :is="page"></component>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 必须加上 type="module" -->
<script type="module">
import BooksPage from './pages/BooksPage.js';
new Vue({
el: '#app',
data: {
page: BooksPage
},
methods: {
navigate(event) {
this.page = () => import(`./${event.target.pathname}`)
// 如果 Vue.js < 2.5.0
// .then(m => m.default)
}
}
});
</script>
</body>
</html>注意，这里使用了vue的内置 component组件，依 is 的值，来决定哪个组件被渲染。
BookPage的内容
export default {
name: 'BooksPage',
template: `
<div>
<h1>Books Page</h1>
<p>{{ message }}</p>
</div>
`,
data() {
return {
message: 'Oh hai from the books page'
}
}
};完整的代码已放到了 GitHub 上面 如果觉得文章对你有帮助，请点下下方的喜欢，谢谢！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.01.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录