uni-app vue3 + vite 开发小程序打包不支持分包优化

uni-app vue3 + vite 开发小程序打包不支持分包优化

7 回复

vue3小程序平台,只要把文件放在分包里引入即可

更多关于uni-app vue3 + vite 开发小程序打包不支持分包优化的实战教程也可以访问 https://www.itying.com/category-93-b0.html


意思是只要分包内的页面引入了主包外面的js文件或共用组件,都会把对应编译生成的页面js打到主包的vendor.js文件内吗

我现在分包内的页面就引入了主包的公共组件component和请求封装的api而已,不太可能把所有分包需要用到的东西都丢分包里吧,那不是每个分包都要封装一遍请求?

回复 1***@163.com: 项目内的js文件,编译到小程序,会尽可能保持原来的目录结构,node_modules等内容会打包到vendor

回复 DCloud_UNI_FengXY: 可以将node_modules内容打包到一个分包中嘛,供其他分包调用

使用分包了,主包vendor还是大1.4M, vue3 vite方式,有没有解决办法?

uni-app 中使用 Vue 3Vite 开发小程序时,确实可能会遇到分包优化不支持的问题。这是因为 uni-app 的官方分包机制主要是为 Webpack 构建工具设计的,而 Vite 的构建机制与 Webpack 不同,因此可能会出现一些兼容性问题。

不过,你可以尝试以下几种方法来解决或绕过这个问题:

1. 使用 uni-app 官方推荐的 Webpack 构建

uni-app 官方对 Webpack 的支持更为成熟,尤其是对于小程序的分包优化。如果你对分包优化有较高的需求,可以考虑使用 Webpack 作为构建工具,而不是 Vite

2. 手动分包

虽然 Vite 不支持自动分包,但你仍然可以手动进行分包配置。具体步骤如下:

  1. 创建分包目录: 在 src 目录下创建一个新的分包目录,例如 subPackageA

  2. 配置 pages.json: 在 pages.json 中手动配置分包信息。例如:

    {
      "pages": [
        {
          "path": "pages/index/index",
          "style": {
            "navigationBarTitleText": "首页"
          }
        }
      ],
      "subPackages": [
        {
          "root": "subPackageA",
          "pages": [
            {
              "path": "pageA/pageA",
              "style": {
                "navigationBarTitleText": "分包A"
              }
            }
          ]
        }
      ]
    }
回到顶部