脚本分发

可以将只有分包使用的javascript/typescript，移动到相应的分包内。

如何使用

安装

pnpm add @plugin-light/webpack-plugin-dispatch-script -D

在 vue.config.js 中添加如下设置：

const { DispatchScriptPlugin } = require('@plugin-light/webpack-plugin-dispatch-script');

module.exports = {
  configureWebpack: {
    plugins: [
      new DispatchScriptPlugin()
    ],
  }
}

参数

export type IDispatchScriptOptions = {
  // 禁止移动的白名单列表
  whiteList?: Array<string>;

  // 是否增加 common/vendor 的引用
  addCommonVendorRequire?: boolean;
};

whiteList 只能是子节点，如果设置了非子节点，那么它引用的所有模块也要一同列举，否则会存在父节点在主包、子节点在分包，引用失败。可以类比成，小兵随便挪地方，将军要走需要连他的手下一起挪走。

日志

脚本分发是比较复杂的插件，执行时会在 log 目录下输出一些日志，下面是日志文件的说明。

文件名	说明
dispatch-script.inner-deps-flatten	依赖信息，已处理
dispatch-script.inner-deps-raw	依赖信息
dispatch-script.inner-deps-to-dispatch-deep	将要派发的依赖
dispatch-script.inner-main-package-pages	主包页面
dispatch-script.raw-module-sources	module.resource 列表
dispatch-script.raw-resource-resolve-data-list	原始引用关系
dispatch-script.result-handled-modules	插件处理的模块

文章

uni-app分包优化——脚本分发 (opens new window)

常见问题

如果遇到下面这样的报错，可以尝试传入 addCommonVendorRequire 为 true。

TypeError: Cannot read property 'call' of undefined
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)
    at Object.388b (act-goods-detail-barcode.js:1)
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)
    at Module.3591 (act-goods-detail-barcode.js:1)
    at i (runtime.js?t=wechat&s=1718772395771&v=ca775494edc3431fdc68691e2e22246e:3)