上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

vue-router路由动态import引入组件/vue动态路径懒加载组件

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    328

    主题

    2877

    帖子

    2888

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2888

    猫咪币纪念章

    发表于 2022-3-24 19:12:43 | 显示全部楼层 | 阅读模式

    在router的时候我们可以动态根据后端传回的路径来获取到组件

    类似于

    //import App from './App.vue'
    import { createApp } from 'vue'
    console.log('App', App)
    let a='A'+'p'
    a+=a[1]
    let App = import('./'+a+'.vue')
    App.then(res => {
        console.log('res',res)
        createApp(res.default).mount('#app')
    })

    因为有一些担心被webpack推断优化,所以我组合app.vue繁琐了一点

    我们查看一下打包代码

    console.log('App', App);
    var a = 'A' + 'p';
    a += a[1];
    var App = __webpack_require__("./src lazy recursive ^\\.\\/.*\\.vue$")("./" + a + ".vue");
    App.then(function (res) {
      console.log('res', res);
      (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(res["default"]).mount('#app');
    });

    根据资料可以知道App是一个Promise对象

    那就是

    var App = __webpack_require__("./src lazy recursive ^\\.\\/.*\\.vue$")("./" + a + ".vue");

    返回的promise对象

    __webpack_require__("./src lazy recursive ^\\.\\/.*\\.vue$")

    返回的是一个函数

    webpackAsyncContext(req)

    查看代码可以知道

    function webpackAsyncContext(req) {
            if(!__webpack_require__.o(map, req)) {
                    return Promise.resolve().then(() => {
                            var e = new Error();
                            e.code = 'MODULE_NOT_FOUND';
                            throw e;
                    });
            }
    
            var ids = map[req], id = ids[0];
            return __webpack_require__.e(ids[1]).then(() => {
                    return __webpack_require__(id);
            });
    }

    我们可以查看一下__webpack_require__.o函数

    (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))

    判断map函数存不存在"./App.vue"对象

    如果不存在则报错

    然后开始获取

    var ids = map[req], id = ids[0];

    我们看一下map

    图片.png

    可以看出来ids是一个数组,而id则是编译前的路径

    接下来是通过

    __webpack_require__.e

    这个函数较为复杂,我们就不拆分了,通过jsonp方式引入了对应的文件

    图片.png

    在js引入后会通过window下的webpackChunkvue数组属性,push一个数据,然后触发webpack的回调,进而结束promise。

    图片.png

    这就是webpack下动态打包属性的懒加载流程了

    缺点

    如果使用路径引入,会根据静态路径字符串匹配中收集所有可能的vue文件

    并且编译

    会造成build的成本过大

    但是因为是动态引用

    所以占用的是服务器空间

    并不会影响用户端的使用

    (PS:但是我还是不是很喜欢啊,阿喂!

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表