补充上一篇 实现基于最新chrome的动态按需加载组件

先看 这里 有一个提案,建议引入import()函数,完成动态加载。

import(specifier)

上面代码中,import函数的参数specifier,指定所要加载的模块的位置。import命令能够接受什么参数,import()函数就能接受什么参数,两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。它是运行时执行,也就是说,什么时候运行到这一句,也会加载指定的模块。另外,import()函数与所加载的模块没有静态连接关系,这点也是与import语句不相同。

import()类似于 Node 的require方法,区别主要是前者是异步加载,后者是同步加载。

syntax-dynamic-import

这种方式chrome63后已经原生支持了,但是如果是不支持浏览器就需要babel了。 看这里 https://babeljs.io/docs/plugins/syntax-dynamic-import/

运用

  1. vue的router.js中
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

function load(component) {
  // '@' is aliased to src/components
  return () => import(`@/pages/${component}/index.vue`)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: load('HelloPage')
    },
    {
      path: '/tree',
      name: 'TreePage',
      component: load('TreePage')
    }
  ]
})
  1. vue加载多components
// http://www.css88.com/doc/lodash/#_kebabcasestring
// UploadFile => upload-file
import { kebabCase } from 'lodash'

const load = (component) => {
  return () => import(`../components/${component}.vue`)
}

const commonComponents = [
  'BaseFormDialog',
  'Datepicker',
  'HeaderContent',
  'UploadFile',
  'FullScreenButton',
  'RouterTreeview',
  'RouterLinkBack',
  'ModalDialog',
  'vSelect'
]

commonComponents.forEach(component => {
  Vue.component(kebabCase(component), load(component));
})

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deepcc

jQuery(function($){...})与(function($){...})(jQuery)知识点分享

3556
来自专栏FreeBuf

XSS编码剖析

作者 0xExploit 0×00 引言 很多不了解html、js编码的童鞋挖掘xss漏洞时,都是一顿乱插,姿势对了,就能获得快感,姿势不对,就么反应。另外在f...

3018
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

2053
来自专栏LanceToBigData

XML(一)XML大揭秘

前言 每天都要学习很多新的知识,比你厉害的程序员比你还努力,那你混的下这口饭吗?所以不抱怨,坚持!接下来给大家分享的是xml。可能很多做开发的都遇到过xml, ...

2039
来自专栏柠檬先生

sass 基础——回顾

1.webstorm 自动编译SASS   下载安装包 http://rubyinstaller.org/downloads/   然后点击安装,路径为默认路...

2347
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5107
来自专栏cloudskyme

使用jquery-easyui写的CRUD插件(1)

写插件先看看jqeury的插件如何写,先了解一下如何写插件的代码。 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,...

3839
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

看此篇博客前或者后,看一下trailhead可以加深印象以及理解的更好:https://trailhead.salesforce.com/modules/lex...

1350
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

4.3K6
来自专栏JetpropelledSnake

Vue学习笔记之Vue的使用

我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。

903

扫码关注云+社区

领取腾讯云代金券