实现基于最新chrome的动态按需加载组件

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 上面 如果觉得文章对你有帮助,请点下下方的喜欢,谢谢!

参考:https://medium.com/js-dojo/build-a-lazy-load-router-with-vue-js-and-the-latest-browser-features-a1b52fe52dda

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

9471
来自专栏吴伟祥

IDEA 主题样式 原

0.Settings-->Appearrance&Behavior  --> theme: Windows

1915
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3288
来自专栏mwangblog

git标签

1443
来自专栏向治洪

React Native程序调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2926
来自专栏Bug生活2048

微信小程序版博客——图片相关处理

前面提到,小程序服务端的数据是基于Ghost的公共API的,在设计首页文章列表时,为了美观加上了头图,但是服务端没有提供对应的字段(头图url)。

3642
来自专栏一个会写诗的程序员的博客

功能强大的jQuery图片查看器插件

2961
来自专栏向治洪

React Native开发之调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2768
来自专栏守望轩

Visual Studio 2008 每日提示(十五)

#141、在打开的工具窗口中上下移动定位 原文链接:You can use Alt+F7 and Shift+Alt+F7 to move to the ne...

3453
来自专栏DeveWork

幻灯片jQuery插件Orbit 介绍(附添加到WordPress教程)

这年头,几乎常规的网站都有幻灯片;没有反而显得不高档了。今天介绍一个图片滑动幻灯片jQuery 插件,名字叫 Orbit,自定义功能很强大却是轻量级(仅仅4kb...

24910

扫码关注云+社区

领取腾讯云代金券