Taro-dev下小程序预览

背景

dev默认没有开启代码压缩，导致我们在开发阶段无法预览；

taro的推荐NODE_ENV=production会导致热更新反应迟钝；

正常情况下超过2M无法预览：

先说解决办法及适用场景

• 解决：压缩代码，与开发迭代无关的部分
• 场景1：把主包的公共部分vendors.js等压缩掉，有限；
• 场景2：在场景1基础上。分包后，开发subpages时，可以把pages（主包）的代码压缩掉

1、dev:weapp使用NODE_ENV=production

跟打生产包一样，但是：

结果：每次更改一行代码，操作两次，每次需要20s编译

2、使用压缩策略

// project.private.config.json
// 这个只是一个自定义配置项，可以自己写在别的文件里面导出
 "concentration": "subpages",

// config/dev.js

const privateConf = require('../project.private.config.json');

const miniTest = ['vendors.js', 'taro.js', 'runtime.js'].concat(
  // 是否专注于subpages？是，压缩pages。这样压缩主包大小，不会影响预览
  privateConf.concentration === 'subpages' ? [/^pages[\\/].+\.m?js(\?.*)?$/] : []
);

module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  mini: {
    webpackChain(config) {
      config.merge({
        optimization: {
          // dev默认不会打开压缩（会影响hot速度），但是我们可以把非业务代码压缩一下
          minimize: true,
          minimizer: [
            new TerserPlugin({
              parallel: true,
              cache: true,
              // 默认压缩'vendors.js', 'taro.js', 'runtime.js'，根据需求设置是否压缩pages
              test: miniTest,
            }),
          ],
        },
      });
    },
  },
};

主包1.9M

这样改，我专注于subpages里面开发，改一行代码需要5秒编译，效果明显

其实我这边是点到为止了，按照我的思路：

1. 能压缩的通通压缩，但是不能影响自己的开发体验，这里需要平衡下；
2. wxss的压缩；

如有其他的方案欢迎大家指点，感谢！