实现基于最新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文件

点击动态加载js

注意：import方法 返回的是一个promise对象

例2 vue加载动态路由组件

html

  
  


  

    

        
        Books
        Movies
        Games
    
    
  

注意，这里使用了vue的内置 component组件，依 is 的值，来决定哪个组件被渲染。

BookPage的内容

export default {
  name: 'BooksPage',
  template: `
    

     
Books Page
     
{{ message }}
    
  `,
  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