Taro: 打包体积太大微信开发者工具点击预览提示超过2000kb

[yclnycl]

问题描述

taro项目src目录1.7mb 运行 run 的dev:weapp 出来的包目录大小超过4mb 开发工具无法预览

复现步骤

项目源码

dev模式下代码

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

期望行为

希望能减少打包体积 在开发工具上直接预览 而不是每次都要build才能预览

报错信息

无报错

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[Chen-jj]

@yclnycl 建议从 webpack 的配置寻找解决办法，例如关闭 sourcemap，配置 terser 去除掉 webpack 的注释等等。但是都可能对你调试有一点影响，看个人取舍了。

[luckyadam]

用 webpack-bundle-analyzer 看看什么文件大吧

[qinhuaihe]

@luckyadam 麻烦您帮我看看是什么问题, 我就用的基本的框架和taro-ui啊, 升级taro next后就超大了;另外webpack的注释怎么去啊, 编译出来的代码里面注释挺多的

[Chen-jj]

@zmayor https://webpack.js.org/plugins/terser-webpack-plugin/#remove-comments

[cncolder]

@Chen-jj 只有 production 模式 terser 配置才有效吧?

而且实际使用中我也无法关闭 .license.txt 选项, 为此我还提过 issue #5708, 后来不了了之.

terser: {
        enable: true,
        config: {
            extractComments: false,
            output: {
                comments: false,
            },
        },
    },

[Chen-jj]

@cncolder 如果是 watch 模式，则需要设置一下 NODE_ENV 为 'production'。

https://github.com/NervJS/taro/blob/bc6af68bda2cbc9163fbda36c15878fc96aec8f1/packages/taro-cli/src/presets/commands/build.ts#L55-L58

https://github.com/NervJS/taro/blob/bc6af68bda2cbc9163fbda36c15878fc96aec8f1/packages/taro-cli/src/presets/commands/build.ts#L67

https://github.com/NervJS/taro/blob/bc6af68bda2cbc9163fbda36c15878fc96aec8f1/packages/taro-mini-runner/src/webpack/build.conf.ts#L172-L184

[hujialianghuwei]

dev:weapp 后发现文件过大不能在手机上预览，通过webpack-bundle-analyzer分析是scss 文件太大，在dev 模式下没有转化压缩成css 文件 ，我想在dev 模式下也转换压缩scss 怎么解决？

[cncolder]

@Chen-jj webpack 配置我看过一部分, 仍然没有理出头绪. 我是想 taro build --type weapp 时排除掉 license, 因为开发者工具中上传时总是显示一个烦人的警告. NODE_ENV 是 'production' 并且不是 watch 模式, terser extractComments 配置试过各种方式都不生效.

[c690554125]

我用的是cli3.0.0 beta5，翻了下cli源码，也没看太明白，测试了下production的话，压缩是压缩了，但是不会再watch了。
如果开发环境因为预览的原因，也需要每次开发都压缩代码，可以安装一下 terser-webpack-plugin。然后在webpackChain里面配置下，亲测有效，只不过开发时每次编译再压缩，速度慢的很明显的，应该是全部都重新编译压缩了。

在dev.js配置里面加。

      chain.mode('production')
      chain.optimization.minimize(true)
      chain.plugin('terser')
       .use(TerserPlugin, [{
          cache: true
         }])

[Wuwei9536]

同样的问题，初始项目加上taro-ui，就写了一个组件，dev模式下包体积就超过了2M，导致无法预览。

[XuChunxiao]

+1

[wowtrxqn]

我也遇到了，在index.js里设置babel:{sourceMap: false}都没法删掉.map文件

[wowtrxqn]

@Chen-jj 只有 production 模式 terser 配置才有效吧?

而且实际使用中我也无法关闭 .license.txt 选项, 为此我还提过 issue #5708, 后来不了了之.

terser: {
        enable: true,
        config: {
            extractComments: false,
            output: {
                comments: false,
            },
        },
    },

这个写法写在index.js里吗？我安装了"terser-webpack-plugin": "^3.0.6",然后拷贝了这个terser 没用啊

[Songkeys]

减少打包体积：

npm i terser-webpack-plugin -D

// config/index.js
const TerserPlugin = require("terser-webpack-plugin");

const config = {
  mini: {
    webpackChain(chain, webpack) {
      chain.mode("production");
      chain.optimization.minimize(true);
      chain.plugin("terser").use(TerserPlugin, [
        {
          cache: true,
          extractComments: false,
          terserOptions: {
            output: {
              comments: false
            }
          }
        }
      ]);
    }
  }
}

但是编译过程会变得很长。

某些 npm 包可能会携带很多不必要的文件。你可以用 webpack-bundle-analyzer 来分析是什么导致打包体积过大：

npm i webpack-bundle-analyzer -D

// config/index.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

const config = {
  mini: {
    webpackChain(chain, webpack) {
      chain.plugin("bundle analyzer").use(BundleAnalyzerPlugin);
    }
  }
}

[wowtrxqn]

减少打包体积：

npm i terser-webpack-plugin -D

// config/index.js
const TerserPlugin = require("terser-webpack-plugin");

const config = {
    webpackChain(chain, webpack) {
      chain.mode("production");
      chain.optimization.minimize(true);
      chain.plugin("terser").use(TerserPlugin, [
        {
          cache: true,
          extractComments: false,
          terserOptions: {
            output: {
              comments: false
            }
          }
        }
      ]);
    }
}

但是编译过程会变得很长。

某些 npm 包可能会携带很多不必要的文件。你可以用 webpack-bundle-analyzer 来分析是什么导致打包体积过大：

npm i webpack-bundle-analyzer -D

// config/index.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

const config = {
    webpackChain(chain, webpack) {
      chain.plugin("bundle analyzer").use(BundleAnalyzerPlugin);
    }
}

我安装的是 taro next rc3.0.0-rc6, webpackChain(chain,webpack){ ... }这个写在config里不对嘛

[Songkeys]

@wowtrxqn 已改正，正确字段是 config.mini.webpackChain。

[wowtrxqn]

@wowtrxqn 已改正，正确字段是 config.mini.webpackChain。

非常感谢，这么晚还回复，
试了可以了，还有个疑问chain.mode("production");这句话好像没啥影响，development和production都成功压缩了

[Songkeys]

chain.mode("production");这句话好像没啥影响

@wowtrxqn 我是看上面有人说好像只有 production 模式生效。如果没影响的话，就去掉吧……🤔

[c690554125]

新方法：本地开发依旧用dev，不用production，预览的时候，使用gulp配合开发者工具的自定义命令实现预览时压缩dist目录代码，可以参靠我仓库的taro-mobx-demo项目里的gulpfile.js。效率还可以，预览的时候，跑一遍gulp，大概在十几秒，比production时每次添加个console就等3-4s舒服多了。

[darkfiredarkhalo]

新方法：本地开发依旧用dev，不用production，预览的时候，使用gulp配合开发者工具的自定义命令实现预览时压缩dist目录代码，可以参靠我仓库的taro-mobx-demo项目里的gulpfile.js。效率还可以，预览的时候，跑一遍gulp，大概在十几秒，比production时每次添加个console就等3-4s舒服多了。

这样之后--watch就没用了, 不过压缩率确实比上边提到的方法高

[darkfiredarkhalo]

新方法：本地开发依旧用dev，不用production，预览的时候，使用gulp配合开发者工具的自定义命令实现预览时压缩dist目录代码，可以参靠我仓库的taro-mobx-demo项目里的gulpfile.js。效率还可以，预览的时候，跑一遍gulp，大概在十几秒，比production时每次添加个console就等3-4s舒服多了。

这样之后--watch就没用了, 不过压缩率确实比上边提到的方法高

[c690554125]

新方法：本地开发依旧用dev，不用production，预览的时候，使用gulp配合开发者工具的自定义命令实现预览时压缩dist目录代码，可以参靠我仓库的taro-mobx-demo项目里的gulpfile.js。效率还可以，预览的时候，跑一遍gulp，大概在十几秒，比production时每次添加个console就等3-4s舒服多了。

这样之后--watch就没用了, 不过压缩率确实比上边提到的方法高

--watch还有用的啊，开发阶段dev的时候，修改代码Taro则立刻编译成小程序代码

[han88829]

升级到taro3.0.5体积太大了，之前2M，现在3M

[wsyxl365]

新方法：本地开发依旧用dev，不用production，预览的时候，使用gulp配合开发者工具的自定义命令实现预览时压缩dist目录代码，可以参靠我仓库的taro-mobx-demo项目里的gulpfile.js。效率还可以，预览的时候，跑一遍gulp，大概在十几秒，比production时每次添加个console就等3-4s舒服多了。

老哥感谢，虽然麻烦了一点点 但是真机调试起来舒服多了

[towry]

同样的问题，升级到 3.0.22 后突然就变大了。

升级前 600kb，升级后 2000kb。

。。。