[Taro 3.0.0-rc.4] 如何在开发时启用 Tree Shaking 以引用 react-use 等第三方包

[fjc0k]

问题描述

代码：

import React from 'react'
import { Button, View } from '@tarojs/components'
import { useNumber } from 'react-use'

export default function () {
  const [n, acts] = useNumber(1)
  return (
    <View>
      <Button onClick={() => acts.inc()}>{n}+1</Button>
    </View>
  )
}

react-use 是原生支持 Tree Shaking 的，但在 Taro 的开发模式下，Tree Shaking 是没有被启用的，这导致 react-use 被全量引入，因而其中某些依赖特定浏览器特性的 hooks 在初始化时就会报错，导致整个项目崩盘：

npm run dev:weapp

但在生产模式下，因为启用了 Tree Shaking，一切正常：

npm run build:weapp

复现步骤

如上。

期望行为

在开发模式下也启用 Tree Shaking 或者提供选项或者文档说明。

由于小程序环境的特殊性，以及不可能为每一个第三方包改造一个 Taro 版，建议在小程序开发时默认启用 Tree Shaking 以支持更多第三方包。

报错信息

如上。

系统信息

Taro CLI 3.0.0-rc.4 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 13.14.0 - /var/folders/0q/8ph_h_ks6l584kf5xkzfxjmr0000gp/T/yarn--1592320673090-0.4761796321475462/node
      Yarn: 1.19.1 - /var/folders/0q/8ph_h_ks6l584kf5xkzfxjmr0000gp/T/yarn--1592320673090-0.4761796321475462/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v13.14.0/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/components: 3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/mini-runner: 3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/react: 3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/runtime: 3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/taro: 3.0.0-rc.4 => 3.0.0-rc.4 
      @tarojs/webpack-runner: 3.0.0-rc.4 => 3.0.0-rc.4 
      babel-preset-taro: 3.0.0-rc.4 => 3.0.0-rc.4 
      react: ^16.10.0 => 16.13.1 

[fjc0k]

另一个原因，不在开发时启用 Tree Shaking 会导致代码体积轻易超过 2M 限制，导致不能预览。

[fjc0k]

暂时解决方案，config/dev.js:

/** @type import('@tarojs/taro/types/compile').IProjectConfig */
module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  defineConstants: {},
  mini: {
    webpackChain(chain) {
      chain.merge({
        optimization: {
          // 开发模式下开启 Tree Shaking
          sideEffects: true,
        },
      })
    },
  },
  h5: {},
}

[cncolder]

npm i babel-plugin-import

配置 babel.config.js plugins 字段

    plugins: [
        ['import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false }, 'import lodash'],
        [
            'import',
            { libraryName: 'react-use', libraryDirectory: 'esm', camel2DashComponentName: false },
            'import react-use',
        ],
    ],

[fjc0k]

@cncolder 恩，这是一种方案，但偏复杂而且小白用户万一使用了一个支持 Tree Shaking 的包但在开发时报错了（但在打包时正常），那他可能会认为这个包不支持在 Taro 中使用，而不是手动去配按需加载，Tree Shaking 的意义就在于自动的按需加载。

[cncolder]

@fjc0k 要先明确一下什么是支持 Tree Shaking 的包, 不是这个包天生就能自我 Tree Shaking, 而是这个包可以被 Tree Shaking.

react-use 里有几个 hooks 用到的 npm 包默认是不安装的, 还有一些包是只能运行在 web 浏览器里的, 以上两个条件都满足的前提下才能直接从入口文件 import, 否则需要配置 babel-plugin-import, 下面是官方文档.

https://github.com/streamich/react-use/blob/master/docs/Usage.md

[fjc0k]

@cncolder 我建议开启 Tree Shaking 的目的不就是自动去除小程序不支持的东西嘛，如果非小程序，那么在开发时关闭摇树优化提高一部分性能无可厚非，但既然是小程序，许多特性不支持，预览还有2M限制，反正都做了许多转换，那么些性能我觉得无伤大雅，开启了还能直接复用第三方包，免去一些配置（特别是对于普通用户）。至于你说的 react-use 里面小程序不支持的东西，开启摇树优化就都会去除的，当然你说的 babel-plugin-import 也是一种选择，只是说对于普通用户而言，直接开启摇树优化是要友好点的。

[cncolder]

@fjc0k 以 react-use 为例, 如果你有免配置就能自动 Tree Shaking 的办法, 例如 webpack 配置或插件, 欢迎分享.

[fjc0k]

@cncolder
摇树优化是 webpack 原生支持的，你可以选择开启抑或关闭。

我在上面的回复中也提了，将 optimization. sideEffects 设为 true 即可在开发模式下开启摇树优化。

现在 Taro Next 的问题就是开发模式和构建模式表现不一致，因为开发模式默认没开启 Tree Shaking，而构建模式又开启了，这样的结果就是一些包在开发时会报错，但构建时又是正常的，这就让人很迷惑。