微信小程序开启压缩和不开启压缩最后压缩包的体积一样

[dreamthen]

问题描述

发现自己的taro项目升级至2.0版本之后，开启uglify和不开启uglify的结果是一样的，都是1.74M。

复现步骤

const config = {
  projectName: 'Pet-Planet',
  date: '2018-11-26',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: {},
  uglify: {
    enable: false,
    config: {}
  },
  csso: {
    enable: false,
    config: {}
  },
  babel: {
    sourceMap: false,
    presets: [
      'env'
    ],
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread',
      ['transform-runtime', {
        helpers: false,
        polyfill: false,
        regenerator: true,
        moduleName: 'babel-runtime'
      }]
    ]
  },
  defineConstants: {},
  copy: {
    patterns: [],
    options: {}
  },
  mini: {
    webpackChain(chain, webpack) {
      chain.plugin('analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []);
      //使用ContextReplacementPlugin将moment.locale当中除了zh-cn的语言包,其余都剔除掉
      chain.plugin('contextReplace').use(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/), []);
    },
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      pxtransform: {
        enable: true,
        config: {}
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      }
    },
    compile: {
      compressTemplate: true
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        }
      }
    }
  }
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
};

期望行为

期望可以uglify enable设置为true时可以压缩。

系统信息

macOS 10.15.2
Node 12.14.0
npm 6.13.6
taro 2.0.1
taro-ui 2.2.4

[taro-bot]

CC @Chen-jj

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[dreamthen]

而且升级到2.0版本以上之后，包大了大约400k的样子，uglify毛用没有

[shenghanqin]

跟一下。看看情况。

[dreamthen]

我已经退回到1.3.35版本了，1.4M，uglify压缩了100k，效果还是比较显著的

[luckyadam]

确实有问题
但问题是如果你是执行打包命令，无论 uglify 设置的是 true 还是 false，都会压缩，而不是不压缩

[dreamthen]

确实有问题
但问题是如果你是执行打包命令，无论 uglify 设置的是 true 还是 false，都会压缩，而不是不压缩

但是，1.x版本还是会压缩100k的，2.x版本的压缩很不明显，也许是十几k，几十k，而且最关键的问题在于，打包增大了400k，从1.4M直接蹿升到了1.8M，我估计是不是@tarojs/mini-runner还不够成熟呢？我看新加的runtime按需加载依赖包很小呀，为啥会有这么大的差距？

[luckyadam]

从哪儿看出文件变成了 1.8m

[dreamthen]

@luckyadam webpack-bundle-analyzer，上面已经贴图了，然后我还尝试着生成体验版，上传的时候提示我1.8M，vendors.js已经超过500k，"上传代码时自动压缩混淆"不会启动压缩机制。

[luckyadam]

如果觉得 vendors.js 太大，可以自己配置拆分，https://nervjs.github.io/taro/docs/config-detail.html#minicommonchunks

而且，Taro 2 和 Taro 1 的编译不应该会差这么多，建议在系统文件目录下直接查看 1 和 2 编译出来的结果大小进行对比，如果真的差异太大，也可以对比一下两者生成的文件，看看哪部分内容过大

[shenghanqin]

我也跟一下这个问题的发展😊

[wenxiayili]

如果觉得 vendors.js 太大，可以自己配置拆分，https://nervjs.github.io/taro/docs/config-detail.html#minicommonchunks

而且，Taro 2 和 Taro 1 的编译不应该会差这么多，建议在系统文件目录下直接查看 1 和 2 编译出来的结果大小进行对比，如果真的差异太大，也可以对比一下两者生成的文件，看看哪部分内容过大

我这边有一个例子，就是引入taro-ui中的一个组件AtIndexes，未引入前包的体积是600多KB,引入之后dev情况下是1020KB。您刚说的自定义分包，也是可以的，但是您能提供一个范例吗？谢谢您！文档中是一句话带过。对于webpack-chain不熟悉的人来说，确实比较困难，如果你能提供一个范例，比如就以引入taro-ui例子，大家就都明白了。如果您有时间，请帮下我们 谢谢！

[lms-sam]

跟一下问题的发展。看了enable为true的配置。build出来的代码没有压缩，也没有混淆。

确实有问题
但问题是如果你是执行打包命令，无论 uglify 设置的是 true 还是 false，都会压缩，而不是不压缩

[lms-sam]

跟一下问题的发展。看了enable为true的配置。build出来的代码没有压缩，也没有混淆。

确实有问题
但问题是如果你是执行打包命令，无论 uglify 设置的是 true 还是 false，都会压缩，而不是不压缩

build代码为压缩，dev不压缩。done

[kusion]

在dev下，无论 uglify的enable 设置是 true 还是 false，都没有压缩。

[dreamthen]

也碰到了类似问题，无论 uglify的enable 设置是 true 还是 false，都没有压缩。没区别，有点坑

所以我才退回到了1.3.35版本

[taichenglu]

遇到同样的问题，从 1.3.33 升到 2.0.6，升级前 build 是 597kb，升级后 build 变成 887kb，从比例上看还蛮大的。

[dreamthen]

虽然新版本的打包，将vendors.js进行了分割，微信开发者工具也进行了压缩，但是还是比之前大了300kb左右

[yyhdev]

set NODE_ENV=production然后npm run dev:weapp就行了，官方文档居然没介绍。。。

[dreamthen]

set NODE_ENV=production然后npm run dev:weapp就行了，官方文档居然没介绍。。。

我试一下

[dreamthen]

可以的，官方文档里面最好说明一下

[Garfield550]

欢迎 PR

[hardmanhong]

官网不给个主意事项吗？npm run build:weapp ，NODE_ENV并没有改变

[hardmanhong]

我的版本是2.1.5，prod.js文件设置 uglify并没有效果，已确定是production 环境，因为在prod.js文件打印了日志

module.exports = {
  env: {
    NODE_ENV: '"production"'
  },
  defineConstants: {},
  mini: {},
  h5: {
    /**
     * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。
     * 参考代码如下：
     * webpackChain (chain) {
     *   chain.plugin('analyzer')
     *     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
     * }
     */
  },
  uglify: {
    enable: true,
    filter: /\.js$/,
    config: {
      // 配置项同 https://github.com/mishoo/UglifyJS2#minify-options
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  csso: {
    enable: true,
    config: {
      // 配置项同 https://github.com/css/csso#minifysource-options
      sourceMap: false
    }
  }
};

[hardmanhong]

set NODE_ENV=production然后npm run dev:weapp就行了，官方文档居然没介绍。。。

我执行命令后是production环境了，配置了uglify并且开启，但是并没有压缩js

"build:weapp": "set NODE_ENV=production && taro build --type weapp --watch",

[dpyzo0o]

set NODE_ENV=production然后npm run dev:weapp就行了，官方文档居然没介绍。。。

我执行命令后是production环境了，配置了uglify并且开启，但是并没有压缩js

"build:weapp": "set NODE_ENV=production && taro build --type weapp --watch",

不要加watch, 加watch就不会压缩

[DrakeXiang]

cross-env NODE_ENV=development taro build --type weapp
必须使用cross-env并且不能加&&

[taichenglu]

不只是 dev 体积变大，升级后 build 体积也变大不少，逼得我把小程序拆包了