Vanisper
commented
4 months ago 已实现vite下的分包优化，下面贴出patch相关部分：
基于
@dcloudio__uni-mp-vite@3.0.0-alpha-4010520240507001版本的补丁
diff --git a/dist/plugin/build.js b/dist/plugin/build.js
index 47598739e43a1f8049b54fcd756411b42a5dc0af..5c77f79dfd9be6df4ec18517c833034bc55b393b 100644
--- a/dist/plugin/build.js
+++ b/dist/plugin/build.js
@@ -91,9 +91,86 @@ function isVueJs(id) {
return id.includes('\0plugin-vue:export-helper');
}
const chunkFileNameBlackList = ['main', 'pages.json', 'manifest.json'];
+
+// #region subpackage
+const UNI_SUBPACKAGES = process.UNI_SUBPACKAGES || {};
+const subPkgsInfo = Object.values(UNI_SUBPACKAGES);
+const normalFilter = ({ independent }) => !independent;
+const independentFilter = ({ independent }) => independent;
+const map2Root = ({ root }) => root + '/';
+const subPackageRoots = subPkgsInfo.map(map2Root);
+const normalSubPackageRoots = subPkgsInfo.filter(normalFilter).map(map2Root);
+const independentSubpackageRoots = subPkgsInfo.filter(independentFilter).map(map2Root);
+
+// id处理器：将id中的moduleId转换为相对于inputDir的路径并去除查询参数后缀
+function moduleIdProcessor(id) {
+ let inputDir = (0, uni_cli_shared_1.normalizePath)(process.env.UNI_INPUT_DIR);
+ // 确保inputDir以斜杠结尾
+ if (!inputDir.endsWith('/')) {
+ inputDir += '/';
+ }
+
+ const normalized = (0, uni_cli_shared_1.normalizePath)(id);
+ const name = normalized.split('?')[0];
+ // 从name中剔除inputDir前缀
+ const updatedName = name.replace(inputDir, '');
+
+ return updatedName;
+}
+// 查找模块列表中是否有属于子包的模块
+const findSubPackages = function (importers) {
+ return importers.reduce((pkgs, item) => {
+ const pkgRoot = normalSubPackageRoots.find(root => moduleIdProcessor(item).indexOf(root) === 0);
+ pkgRoot && pkgs.add(pkgRoot);
+ return pkgs;
+ }, new Set())
+}
+// 判断是否有主包(是否被主包引用)
+const hasMainPackage = function (importers) {
+ return importers.some(item => {
+ return !subPackageRoots.some(root => moduleIdProcessor(item).indexOf(root) === 0);
+ })
+}
+// 判断该模块引用的模块是否有跨包引用的组件
+const hasMainPackageComponent = function (moduleInfo, subPackageRoot) {
+ if (moduleInfo.id && moduleInfo.importedIdResolutions) {
+ for (let index = 0; index < moduleInfo.importedIdResolutions.length; index++) {
+ const m = moduleInfo.importedIdResolutions[index];
+
+ if (m && m.id) {
+ const name = moduleIdProcessor(m.id);
+ // 判断是否为组件
+ if (
+ name.indexOf('.vue') !== -1 ||
+ name.indexOf('.nvue') !== -1
+ ) {
+ // 判断存在跨包引用的情况(该组件的引用路径不包含子包路径，就说明跨包引用了)
+ if (name.indexOf(subPackageRoot) === -1) {
+ if (process.env.UNI_OPT_TRACE) {
+ console.log('move module to main chunk:', moduleInfo.id,
+ 'from', subPackageRoot, 'for component in main package:', name)
+ }
+
+ // 独立分包除外
+ const independentRoot = independentSubpackageRoots.find(root => name.indexOf(root) >= 0)
+ if (!independentRoot) {
+ return true
+ }
+ }
+ } else {
+ return hasMainPackageComponent(m, subPackageRoot)
+ }
+ }
+ }
+ }
+ return false;
+}
+// #endregion
+
function createMoveToVendorChunkFn() {
const cache = new Map();
const inputDir = (0, uni_cli_shared_1.normalizePath)(process.env.UNI_INPUT_DIR);
+ const UNI_OPT_TRACE = process.env.UNI_OPT_TRACE === 'true' ? true : false;
return (id, { getModuleInfo }) => {
const normalizedId = (0, uni_cli_shared_1.normalizePath)(id);
const filename = normalizedId.split('?')[0];
@@ -114,6 +191,20 @@ function createMoveToVendorChunkFn() {
}
return;
}
+ if (UNI_OPT_TRACE) {
+ // 如果这个资源只属于一个子包，并且其调用组件的不存在跨包调用的情况，那么这个模块就会被加入到对应的子包中。
+ const moduleInfo = getModuleInfo(id) || {};
+ const importers = moduleInfo.importers || []; // 依赖当前模块的模块id
+ const matchSubPackages = findSubPackages(importers);
+ if (
+ matchSubPackages.size === 1 &&
+ !hasMainPackage(importers) &&
+ !hasMainPackageComponent(moduleInfo, matchSubPackages.values().next().value)
+ ) {
+ debugChunk(`${matchSubPackages.values().next().value}common/vendor`, normalizedId);
+ return `${matchSubPackages.values().next().value}common/vendor`;
+ }
+ }
// 非项目内的 js 资源，均打包到 vendor
debugChunk('common/vendor', normalizedId);
return 'common/vendor';
diff --git a/dist/plugins/manifestJson.js b/dist/plugins/manifestJson.js
index 95af5ee04442d5407cb1a1d8c8d27a769aae7d06..ab65b0608c8bd35479dc7c3a50ac3a582dd29f92 100644
--- a/dist/plugins/manifestJson.js
+++ b/dist/plugins/manifestJson.js
@@ -27,6 +27,12 @@ function uniManifestJsonPlugin(options) {
if (options.project) {
userProjectFilename = findUserProjectConfigFile(inputDir, options.project.config);
}
+ // #region 分包优化参数获取
+ const manifestJson = (0, uni_cli_shared_1.parseManifestJsonOnce)(inputDir);
+ const platformOptions = manifestJson[platform] || {};
+ const optimization = platformOptions.optimization || {};
+ process.env.UNI_OPT_TRACE = !!optimization.subPackages;
+ // #endregion
return {
name: 'uni:mp-manifest-json',
enforce: 'pre',
diff --git a/dist/plugins/pagesJson.js b/dist/plugins/pagesJson.js
index 4aad1ad03113710a2f63dbc61f977d148aa194e0..691eac2ac414fd1d271db3050756238644087a37 100644
--- a/dist/plugins/pagesJson.js
+++ b/dist/plugins/pagesJson.js
@@ -61,6 +61,8 @@ function uniPagesJsonPlugin(options) {
(0, uni_cli_shared_1.addMiniProgramPageJson)(name, pageJsons[name]);
}
});
+ // 将 pages.json 的内容挂载到 process.UNI_SUBPACKAGES，方便后续插件使用
+ process.UNI_SUBPACKAGES = appJson.subPackages || {};
return {
code: `import './${uni_cli_shared_1.MANIFEST_JSON_JS}'\n` + importPagesCode(appJson),
map: { mappings: '' },
zlinggnilz
aymonYU
引语
以下是uniapp2, 也就是基于webpack打包的vue2版本的分包优化策略的详细实现 https://github.com/dcloudio/uni-app/blob/fb00949fa49dd7d5d68a43700b7be62e6c0b4af3/packages/vue-cli-plugin-uni/lib/split-chunks.js#L114
以下是基于vite打包的vue3版本的rollup的打包配置
https://github.com/dcloudio/uni-app/blob/1c19012e38fb2049ad7775009d9bb0157965910b/packages/uni-mp-vite/src/plugin/build.ts#L118
问题
本人的项目(uniapp-vue3版本)在小程序这边的包大小已经到了一个瓶颈阶段，该分包的都分包了，公共组件也是尽可能的少了；
甚至魔改了uniapp的源码实现了小程序那边支持的异步分包功能，实现了主包异步引用分包组件的能力；
但是随着业务功能的增多，以上分包优化策略已不满足，小程序发版受到严重的影响，急需实现与vue2版本的分包优化一致功能。
探讨
本人研究了uniapp2版本的webpack的分包优化的具体实现，正在尝试对vite的分包优化进行实现（此工作正在进行中，突发奇想发个issue想知道官方有没有考虑这一块）。
不知官方对此处rollup的打包配置有没有什么指导性的建议，以实现与vue2版本的一样的分包优化的效果。
问题整理
https://github.com/Vanisper/uniapp-bundle-optimizer 我做的分包优化解决方案的一个整理，请阅读readme指引操作。