uni-app 小程序主包体积突然变大，编译后的多个wxss文件出现大量重复样式

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

uni-app 小程序主包体积突然变大，编译后的多个wxss文件出现大量重复样式

开发环境 版本号 项目创建方式
Windows Windows 11 HBuilderX

操作步骤：

具体是什么导致这样的不太清楚

预期结果：

无

实际结果：

无

bug描述：

最近某一次打包小程序发布时，突然提示包体积超出了800多k，之前是可以发布成功的。通过查看文件列表，发现部分页面的wxss突然增加了很多，且每个wxss里面的内容都是一模一样的。所有的页面都有样式隔离，都加了scoped。不明白编译时为什么会当成全局样式去处理。

Image Image


Harmonyos Next教程
3 回复

我也是wxss文件巨多 贼大 好几十k一个


全局样式在main.js或者main.ts中引入，不要在App.vue中引入

针对你提到的uni-app小程序主包体积突然变大，以及编译后的多个wxss文件中出现大量重复样式的问题，这通常是由于代码组织或构建配置不当导致的。以下是一些可能的解决方案，主要通过代码和配置来优化。

1. 提取公共样式

首先，确保你的项目中没有重复的样式定义。你可以通过提取公共样式来减少重复。例如，创建一个common.wxss文件，将所有公共样式放入其中，然后在其他页面或组件中引用。

common.wxss

/* 公共样式 */
.common-button {
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
}

页面或组件引用

<style src="path/to/common.wxss"></style>
<button class="common-button">按钮</button>

2. 使用条件编译

如果你的小程序需要支持多个平台，并且不同平台有不同的样式需求，可以使用条件编译来避免不必要的样式代码被打包到所有平台的包中。

示例

/* #ifdef MP-WEIXIN */
.weixin-specific {
  /* 微信小程序特定的样式 */
}
/* #endif */

/* #ifdef MP-ALIPAY */
.alipay-specific {
  /* 支付宝小程序特定的样式 */
}
/* #endif */

3. 配置webpack或vite（如果适用）

如果你在使用webpack或vite等构建工具，可以通过配置来优化CSS的打包。例如，使用css-minimizer-webpack-plugin来压缩CSS，或者使用purgecss来移除未使用的CSS。

webpack.config.js示例

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      `...`, // 其他优化插件
      new CssMinimizerPlugin(),
    ],
  },
};

注意：uni-app默认使用Vite进行构建，但你可能需要自定义Vite配置来达到类似效果。

4. 检查第三方组件库

如果你使用了第三方组件库，确保它们没有引入不必要的样式。有时候，第三方库可能会包含大量未使用的样式，导致包体积增大。

总结

通过上述方法，你应该能够减少uni-app小程序主包的体积，并解决编译后wxss文件中出现大量重复样式的问题。重点在于提取公共样式、使用条件编译、优化构建配置以及检查第三方库。如果问题依旧存在，建议详细检查项目的构建日志和依赖关系，以找出具体的重复样式来源。

回到顶部