问下大佬们,webpack 的动态导入怎么实现比较好?

[wszgrcy]

不是 import 或者说不是你们想的 import

• webpack 中的动态引入,指的是通过逻辑判断,判断模块是否加载,比如import('xxx'),但是这样 xxx 被限定住了,所谓动态,其实也是有指定范围的动态

如何实现真正的动态?

• 比如 import(变量),这个变量是从后端,或者手动输入,完全无规则(但是有这个模块,只不过不是在构建时出现的,而是后期的补充),

是否需要其他的配置配合

• 这么引入,首先要保证被引入的模块是符合 webpack 打包的,
• 然后就是 webpack 要允许这种方式(但是现在 import 都会做检查,好像没有这种方式)

不知道大佬们有没有这种技术,帮忙提个醒就行了

[randyo]

自己写一个函数用来直接插入 script 标签吧

[wszgrcy]

@randyo 我知道这种方式直接导出变量就行……但是感觉不优雅

[tyx1703]

https://webpack.js.org/configuration/externals/

可能你需要这个？

[wszgrcy]

@tyx1703 externals 在打包时名字已经定义好了吧？

[mscststs]

webpack 的 external 不知道为啥不符合你的要求。

external 是支持从 window 上获取的，如果你需要导入一个未知的依赖，却又不依赖这个模块的代码，那 1L 、3L 的做法就够了。

如果你期望获取一个值却又不能保证取值的时机，那就自己设计一套取值方法，约定好把值挂在 window 上或者某个地方。如果先加载了 js 但是依赖的值还没载入，就 js 提供一个回调允许后期填入这个值。

之前在做一个编辑器，允许异步加载插件就是这样做的。

插件自己去挂载到 window 并且检查有没有 callback，有就自动调用。

可以参考 Vue 的组件注册的流程，Vue.use()

[wszgrcy]

@mscststs 不是说 1l 3l 没用,1l 的我的意思是不优雅,因为 webpack 内部做的引入,很多东西都处理好了,而自己写的话还要搞一套.3l 是的 externals 在打包时就替换了,也是一个常量,即使是我指定多个 externals,也是有限个.不能达到无限个

[mscststs]

@wszgrcy 没有挑战你的意思，确实依赖 webpack 会导致依赖的内容是固定的

没有特别的要求的话可以考虑一下我上面的做法，在 Runtime 通过特定 API 注入就可以了

[noe132]

如果你的 import 不能被静态分析，webpack 会尝试对所有文件都单独生成一个 chunk，会导致打包速度异常缓慢，并且最终输出体积异常大。

就算你要动态 import，正确的做法是先在 if 里判断变量，然后再 import 相应的模块。

[wszgrcy]

@mscststs @noe132 准备写一个类似 webpackJsonP 的插件,自己构建模块在启动是的自解析

[MiracleKagari]

import （ prefix+var ）