小程序 - uniapp，如何在打包时分割vendor文件?

Question

uniapp，如何在打包时分割vendor文件。

使用vite+vue3开发，然后打包成微信小程序，打包后的主包vendor太大，由于首页用到了echarts，想要单独分开这个
我试过在vite.config.js文件配置build打包，但是看到打包后的文件，并没有分割vendor主文件，ehcart没有提取出来

有没有大佬知道怎么分割这个主包文件？

build: {        // 配置分包        rollupOptions: {          output: {            manualChunks(id) {                if (id.includes('node_modules')) {                    return id.toString().split('node_modules/')[1].split('/')[0].toString();                }            }          }        },    }

或者

build: {        // 配置分包        rollupOptions: {          output: {            manualChunks: {                'echarts':['echarts'],             }          }        },    }

Answer 1

答案如下：

在Vite中，使用rollupOptions的manualChunks选项可以帮助你手动拆分chunks。但是，由于uni-app打包微信小程序时，它的打包逻辑可能与纯Vite项目有所不同，可能需要额外的配置。

在你提供的代码中，你已经尝试使用了manualChunks，但是可能由于uni-app的特殊打包机制，这些配置并没有生效。

对于uni-app的微信小程序打包，uni-app本身提供了一些配置选项来优化打包结果。你可以尝试使用mini.optimization选项中的splitChunks配置来手动分割vendor文件。

这里有一个可能的配置示例：

export default {  // ... 其他配置 ...  mini: {    // ... 其他微信小程序配置 ...    optimization: {      splitChunks: {        // 这里的配置可能会根据你的项目实际情况有所不同        cacheGroups: {          echarts: {            name: 'echarts',            test: /[\\/]node_modules[\\/]echarts[\\/]/,            priority: 20, // 优先级            chunks: 'all'          },          // 你可以添加更多的cacheGroup来分割其他的库          // ...        },      },    },  },  // ... 其他配置 ...}

这个配置将会把echarts库单独分割成一个文件。注意，test字段是一个正则表达式，用于匹配需要分割的模块路径。

然后，你需要在你的页面或者组件中正确地引入echarts，以便uni-app的打包工具能够识别并应用这个分割配置。

请注意，这只是一个基本的示例，具体的配置可能会根据你的项目结构和需求有所不同。你可能需要根据你的项目实际情况调整这个配置。

另外，如果你发现这个配置没有生效，那么可能需要检查你的项目是否还有其他相关的配置可能会影响这个行为，或者查看uni-app的官方文档和社区，看看是否有其他开发者遇到了类似的问题，并找到了解决方案。