Skip to content

[Bug]: 5.x的版本,在多个独立分包下,产物大了很多, 增加了大概300KB。 #951

Description

@isaac-feat2021

weapp-tailwindcss 版本

5.1.2

tailwindcss 版本

4.3.1

框架 & 小程序平台

taro 4.2.0, react 18.x, webpack5.x,编译小程序

最小复现bug的代码仓库链接

No response

复现bug的步骤

多个独立分包,多个样式,构建小程序版本。TARO_DISABLE_SOURCEMAP=1 node_modules/.bin/taro build --type weapp --mode development

预期是什么?

构建速度提升。

实际发生了什么?

TARO_DISABLE_SOURCEMAP=1 node_modules/.bin/taro build --type weapp --mode development 构建速度太慢。

运行环境

{
  "name": "mini-app",
  "version": "1.1.19",
  "description": "小程序",
  "author": "ABC.com",
  "license": "MIT",
  "keywords": [
    "Taro4",
    "React",
    "Zustand",
    "TailwindCSS",
    "TypeScript",
    "ESLint",
    "Prettier"
  ],
  "templateInfo": {
    "name": "default",
    "typescript": true,
    "css": "sass"
  },
  "engines": {
    "npm": ">=10",
    "node": ">=24.0"
  },
  "scripts": {
    "build": "node_modules/.bin/taro build --type weapp",
    "build-dev-test": "node_modules/.bin/taro build --type weapp --mode development",
    "build:weapp:preview": "node_modules/.bin/taro build --type weapp --preview",
    "build:weapp:upload": "node_modules/.bin/taro build --type weapp --upload",
    "build:alipay": "node_modules/.bin/taro build --type alipay",
    "build:tt": "node_modules/.bin/taro build --type tt",
    "build:h5": "node_modules/.bin/taro build --type h5",
    "build:rn": "node_modules/.bin/taro build --type rn",
    "build:analyze": "ANALYZE=true npm run build:h5",
    "build:h5:production": "NODE_ENV=production npm run build:h5",
    "build:weapp:production": "NODE_ENV=production npm run build",
    "build:h5:prerender": "PRE_RENDER=true npm run build:h5:production",
    "dev": "NODE_OPTIONS=--max-old-space-size=10240 npm run build -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "lint": "ESLINT_USE_FLAT_CONFIG=true eslint .",
    "lint:fast": "ESLINT_USE_FLAT_CONFIG=true eslint . --max-warnings=0",
    "lint:compat": "ESLINT_USE_FLAT_CONFIG=true eslint . --cache --cache-strategy content",
    "lint:fix": "ESLINT_USE_FLAT_CONFIG=true eslint . --fix",
    "lint:legacy8": "ESLINT_USE_FLAT_CONFIG=false node ./node_modules/eslint8/bin/eslint.js -c .eslintrc.cjs . --max-warnings=0",
    "format": "prettier --write . && ESLINT_USE_FLAT_CONFIG=true eslint . --fix && ESLINT_USE_FLAT_CONFIG=true eslint . --fix",
    "format:check": "ESLINT_USE_FLAT_CONFIG=true eslint . --quiet",
    "test": "node ./internals/scripts/run-tests.js",
    "ci:quality": "npm run lint:fast && npm run format:check && npm test -- --passWithNoTests",
    "ci:quality:full": "npm run lint:fast && npm run lint:legacy8 && npm run format:check && npm test -- --passWithNoTests",
    "postinstall": "patch-package --clear-cache && npm run link:memory",
    "link:memory": "node ./internals/scripts/link-memory.js",
    "upload:weapp": "node_modules/.bin/miniprogram-ci upload --pp",
    "extract-intl": "node ./internals/scripts/extract-intl.js",
    "translate": "node ./internals/scripts/translate.js",
    "cdn:scan": "node ./internals/scripts/cdn/index.js scan",
    "cdn:sync": "node ./internals/scripts/cdn/index.js sync",
    "theme:generate": "node ./internals/scripts/generate-theme-config.js generate"
  },
  "browserslist": [
    "defaults and fully supports es6-module",
    "Android >= 12.0",
    "ios >= 15"
  ],
  "dependencies": {
    "@alova/adapter-taro": "^2.0.15",
    "@babel/runtime": "^7.29.7",
    "@nutui/icons-react-taro": "^3.0.1",
    "@nutui/nutui-react-taro": "^3.0.20",
    "@tanstack/react-query": "^5.100.14",
    "@tarojs/components": "4.2.0",
    "@tarojs/components-advanced": "4.2.0",
    "@tarojs/helper": "4.2.0",
    "@tarojs/plugin-framework-react": "4.2.0",
    "@tarojs/plugin-html": "4.2.0",
    "@tarojs/plugin-http": "4.2.0",
    "@tarojs/plugin-mini-ci": "4.2.0",
    "@tarojs/plugin-platform-h5": "4.2.0",
    "@tarojs/plugin-platform-tt": "4.2.0",
    "@tarojs/plugin-platform-weapp": "4.2.0",
    "@tarojs/react": "4.2.0",
    "@tarojs/runtime": "4.2.0",
    "@tarojs/shared": "4.2.0",
    "@tarojs/taro": "4.2.0",
    "abortcontroller-polyfill": "1.7.8",
    "alova": "^3.5.1",
    "axios": "1.16.1",
    "dayjs": "^1.11.21",
    "deepmerge": "4.3.1",
    "immer": "11.1.8",
    "intl": "1.2.5",
    "intl-locales-supported": "1.8.12",
    "js-base64": "3.7.8",
    "js-sha256": "0.11.1",
    "patch-package": "8.0.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "zustand": "^5.0.13"
  },
  "devDependencies": {
    "@antfu/eslint-config": "6.7.3",
    "@babel/core": "^7.29.7",
    "@babel/preset-env": "^7.29.7",
    "@babel/preset-react": "^7.29.7",
    "@babel/preset-typescript": "^7.29.7",
    "@pmmmwh/react-refresh-webpack-plugin": "0.6.2",
    "@tanstack/react-query-devtools": "^5.100.14",
    "@tarojs/cli": "4.2.0",
    "@tarojs/plugin-mock": "0.0.10",
    "@tarojs/taro-loader": "4.2.0",
    "@tarojs/test-utils-react": "0.1.1",
    "@tarojs/webpack5-runner": "4.2.0",
    "@types/mockjs": "^1.0.10",
    "@types/node": "^25.5.0",
    "@types/react": "^18.0.0",
    "@types/webpack-env": "^1.18.8",
    "@types/wechat-miniprogram": "^3.4.10",
    "@weapp-tailwindcss/cva": "^0.1.6",
    "@weapp-tailwindcss/merge": "^2.2.0",
    "@weapp-tailwindcss/variants": "^0.2.2",
    "ajv": "8.17.1",
    "babel-plugin-formatjs": "10.5.41",
    "babel-plugin-import": "1.13.8",
    "babel-preset-taro": "4.2.0",
    "command-line-args": "6.0.1",
    "eslint": "^9.39.3",
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-refresh": "^0.5.2",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "eslint8": "npm:eslint@8.57.1",
    "@typescript-eslint/eslint-plugin": "^8.56.1",
    "@typescript-eslint/parser": "^8.56.1",
    "@taro-minify-pack/preset": "^0.1.4-alpha.2",
    "@taro-minify-pack/plugin-bundle-analyzer": "^0.1.4-alpha.2",
    "@taro-minify-pack/plugin-cover-browserslist": "^0.1.4-alpha.2",
    "eslint-plugin-import": "^2.32.0",
    "google-translate": "^3.0.0",
    "miniprogram-ci": "^2.1.31",
    "mockjs": "1.1.0",
    "moment-timezone": "^0.6.2",
    "open-google-translator": "^1.0.5",
    "postcss": "^8.5.15",
    "postcss-rem-to-responsive-pixel": "^7.0.4",
    "prettier": "^3.6.2",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "react-refresh": "^0.18.0",
    "sass": "1.79.6",
    "stylelint": "^16.23.1",
    "tailwindcss": "4.3.1",
    "ts-node": "10.9.2",
    "tsconfig-paths-webpack-plugin": "4.2.0",
    "typescript": "^5.9.3",
    "weapp-tailwindcss": "^5.1.2",
    "webpack": "5.105.4"
  }
}

其他附加信息



import path from 'node:path'
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
import { WeappTailwindcss } from 'weapp-tailwindcss/webpack'

import type { UserConfigExport } from '@tarojs/cli'
import { defineConfig } from '@tarojs/cli'

import devConfig from './dev'
import prodConfig from './prod'

const WeappTailwindcssDisabled = ['h5', 'rn'].includes(process.env.TARO_ENV)

const weappTailwindcssOptions = {
  rem2rpx: true,
  cssEntries: [
    path.resolve(__dirname, '../src/app.css'),
    path.resolve(__dirname, '../src/packageSubSingle/app.css'),
    path.resolve(__dirname, '../src/packageSubSingle2/app.css'),
    path.resolve(__dirname, '../src/packageSubSingle3/app.css'),
  ],
  // 方法1: 不要传 appType
  // 注释掉 appType : 'taro'
  // 或者方法2: 显式让所有 css chunk 都是 main chunk
  mainCssChunkMatcher: () => true,
  injectAdditionalCssVarScope: true,
}
function registerWeappTailwindcss(chain) {
  chain.merge({
    plugin: {
      install: {
        plugin: WeappTailwindcss,
        args: [weappTailwindcssOptions],
      },
    },
  })
}


// 示例, 如果你使用 `vs code` 作为开发工具, 你还可以使用注释的语法引入插件包含的声明文件,可获得类似于typescript的友好提示
/**
 * @typedef { import("@tarojs/plugin-mini-ci").CIOptions } CIOptions
 * @type {CIOptions}
 */

// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig(async (merge, {
  command,
  mode
}) => {
  const baseConfig: UserConfigExport = {
    projectName: 'mini-app',
    date: '2026-06-26',
    designWidth: (input: any) => {
      // 1. 如果是 NutUI 的组件,必须返回 375,因为 NutUI 是基于 375 设计的
      if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
        return 375
      }
      // 2. 你的设计稿是 393,所以全局返回 393
      return 393
    },
    deviceRatio: {
      640: 2.34 / 2,
      750: 1,
      828: 1.81 / 2,
      375: 2 / 1,
      // 3. 添加 393 的换算比例
      // 计算公式:750 / 393 ≈ 1.9083969
      393: 750 / 393,
    },
    sourceRoot: 'src',
    outputRoot: 'dist',
    plugins: [
      '@tarojs/plugin-html',
      ['@tarojs/plugin-http', {
        enableCookie: true,
      }],
      // ['@tarojs/plugin-platform-weapp', {
      //   enablekeyboardAccessory: true,
      // }],
    ],
    alias: {
      '@': path.resolve(__dirname, '../src'),
      '@/components': path.resolve(__dirname, '..', 'src/components'),
      '@/utils': path.resolve(__dirname, '..', 'src/utils'),
      '@/constants': path.resolve(__dirname, '..', 'src/constants'),
      '@/hooks': path.resolve(__dirname, '..', 'src/hooks'),
      '@/package': path.resolve(__dirname, '..', 'package.json'),
      '@/project': path.resolve(__dirname, '..', 'project.config.json'),
    },
    sass: {
      data: '@import "@nutui/nutui-react-taro/dist/styles/variables.scss";',
    },
    defineConstants: {},
    copy: {
      patterns: [],
      options: {},
    },
    framework: 'react',
    compiler: {
      type: 'webpack5',
      prebundle: {
        enable: false,
        exclude: ['@nutui/nutui-react-taro', '@nutui/icons-react-taro'],
      },
    },
    cache: {
      enable: true, // Webpack 持久化缓存配置,建议开启。默认配置请参考:https://docs.taro.zone/docs/config-detail#cache
    },
    mini: {
      postcss: {
        pxtransform: {
          enable: true,
          config: {
            selectorBlackList: ['nut-'],
          },
        },
        url: {
          enable: true,
          config: {
            limit: 1024 * 5, // 设定转换尺寸上限
          },
        },
        cssModules: {
          enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
          config: {
            namingPattern: 'module', // 转换模式,取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)

        registerWeappTailwindcss(chain)
      },
      miniCssExtractPluginOption: {
        ignoreOrder: true,
      },
      optimizeMainPackage: {
        enable: true,
        exclude: [
          'src/components/WithIndependentPackageWrapper',
        ],
      },
    },
  }
  if (process.env.NODE_ENV === 'development') {
    // 本地开发构建配置(不混淆压缩)
    return merge({}, baseConfig, devConfig)
  }
  // 生产构建配置(默认开启压缩混淆等)
  return merge({}, baseConfig, prodConfig)
})

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions