uni-app更新4.28后,秋云ucharts打包发布时大小约为1M,超出小程序限制

发布于 1周前 作者 eggper 来自 Uni-App

uni-app更新4.28后,秋云ucharts打包发布时大小约为1M,超出小程序限制
以前的版本,秋云ucharts打包后一共就100K。现在更新后秋云ucharts有1M,导致小程序太大,都无法发布了。这是什么情况?如何解决

3 回复

下载附件,解压出copy.js,替换HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/vite-plugin-uni/dist/plugins/copy.js,然后试试


请问怎么解决的呢?

在uni-app更新到4.28版本后,遇到ucharts打包发布时体积过大的问题确实需要注意。由于小程序对包大小有严格限制,超过限制将导致无法发布。针对这个问题,我们可以通过代码优化、按需引入以及利用第三方插件的压缩功能等方法来减小ucharts的体积。以下是一些具体的代码案例和操作步骤:

1. 按需引入ucharts组件

确保你只引入了需要的ucharts组件,而不是整个库。在uni-app中,你可以通过配置easycombabel-plugin-import等插件来实现按需加载。

示例配置(以babel-plugin-import为例)

.babelrcbabel.config.js中添加如下配置:

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ucharts",
        "libraryDirectory": "components",
        "camel2DashComponentName": false
      },
      "ucharts"
    ]
  ]
}

然后在你的页面中按需引入组件:

import { Line } from 'ucharts';

export default {
  components: {
    'u-line': Line
  }
}

2. 使用Webpack进行代码分割

如果你使用的是HBuilderX进行打包,可以尝试配置Webpack进行代码分割,将ucharts等第三方库单独打包成一个chunk,以便在需要时动态加载。

webpack.config.js示例

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 20000,
    maxSize: 70000,
    minChunks: 1,
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    automaticNameDelimiter: '~',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      ucharts: {
        name: 'ucharts',
        test: /[\\/]node_modules[\\/]ucharts[\\/]/,
        chunks: 'all'
      }
    }
  }
}

3. 利用第三方工具压缩代码

在打包前,可以利用如terser-webpack-plugin等工具对代码进行压缩,进一步减小包体积。

安装terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

webpack.config.js中配置terser-webpack-plugin

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

通过上述方法,你应该能够有效地减小ucharts在小程序中的包体积,从而避免超出小程序的大小限制。请根据实际情况调整配置,确保功能正常且体积优化效果最佳。

回到顶部