起因:最近发现vue项目编译、热更新速度很慢。打算尝试优化一下。搜索发现安装一个插件(dynamic-import-node)可以优化?查阅关于这个插件的相关资料。了解很有限。抱着试一试的心态安装后。启动报错(WARNING):Critical dependency: the request of a dependency is an expression。

有些奇怪,其报错内容 :关键依赖:依赖项的请求是一个表达式 。错误位置关键代码如下 (文件router/index.js)

ctx.keys().forEach((key) => {
    let _key = reg.exec(key);
    _key = (_key[1] || _key[2]).trim();
    const component = ctx(key).default
    if (component.notRoute) return;
    const isLazyload = component.lazyload == false ? false : true;
    const _path =
        `/${component.customPath || _key}${component.params ? ('/:' + component.params) : ''}`
    const _component = isLazyload ?
        () => import(`@/view/${key.replace('./', '')}`) :
        component
    const _name =
        component.name || component.customPath || _key
    const _currentRoute = {
        path: _path,
        name: _name,
        component: _component,
    }
    component.notLogin ? noCheckLoginName.push(_currentRoute.name) : '';
    routes.push(_currentRoute)
})
  • 这是很久之前定义的一个动态路由,以表达式的形式来动态生成router路由结构。 其中错误的关键代码是import(@/view/${key.replace('./', '')}) 这种引用方式出现了警告

将其改成 Promise.resolve(require(@/view/${key.replace('./', '')}).default)

问题暂时得到解决,但后续仍需要深入了解本质。

参考文章:https://my.oschina.net/fattypanda/blog/3652263/

最后修改:2020 年 12 月 16 日 10 : 06 AM
生活需要一些仪式感,比如手冲一杯咖啡:)