“This is the 20th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Some time ago, the company faced the problem of overpackage in multi-terminal projects. Considering all aspects, we adopted the Taro version upgrade scheme with the highest yield. During the Taro upgrade, I came across a reminder about the use of the environment variable process.env in the official documentation. However, feeling a little bit more than I wanted to say in this short line of description, I decided to explore to get a thorough grasp of the use of environment variables.

Do not destruct the env configured process.env environment variable. Instead, use it as a fully written process.env.node_env.

Then I began my journey of discovery.

Value of environmental variables

In Taro3, the biggest benefit of using environment variables is that, at compile time, code that is not of the current compiled type is removed and only code that is of the current compiled type is retained. Those who have developed small programs should have a deep experience. With the growth of business and the increase of code volume, the problem of small program superpackage is simply a lingering nightmare in the process of small program development. All kinds of small programs (wechat small program, Alipay small program, Jingdong small program, etc.) have limits on the volume size of the main package and the total package. Every time we review the technical solution, we keep a close eye on the demand for fear that any business will be involved in the change of the main package.

If you can reduce the size of your code by using environment variables, that’s a lifesaver.

Exploration of environmental variables

1. Official usage plan

Since the official method of using environment variables is provided, let’s explore the official method first. Is it really that good? Let’s wait and see.

Let me write a little test code to see what happens.

To test this, insert the following code into the lifecycle hook and render function:

    / / componentDidMount hook
    if (process.env.TARO_ENV === 'weapp') {
      this.setState({
        platform: 'weapp'}); }if (process.env.TARO_ENV === 'alipay') {
      this.setState({
        platform: 'alipay'}); }/ / render function
    {
      process.env.TARO_ENV === 'weapp'
        ? (<Text>weapp12345</Text>)
        : (<Text>weapp67890</Text>)
    }
    {
      process.env.TARO_ENV === 'alipay'
        ? (<Text>alipay12345</Text>)
        : (<Text>alipay67890</Text>)}Copy the code

Execute the run build: Retry p command line to perform a package compilation, and then review the compilation results.

Wow, it really works, and it’s remarkable. Doesn’t that mean that business logic for different ends and customized business for different brands can be controlled by environment variables? In this case, for different ends, different brands, other conditions are the same, the code volume can be greatly reduced.

2. False attempts

I don’t really believe in evil, isn’t it official to say don’t use structure? I’m gonna have to give it a shot. I’m not gonna look back.

First attempt:

We will assign process.env.taro to a variable, and then use the variable to determine the processing.

    const env = process.env.TARO_ENV;
    
    / / componentDidMount hook
    if (env === 'weapp') {... }if (env === 'alipay') {... }// render
    {
      env === 'weapp'. } { env ==='alipay'. }Copy the code

Look at the effect, uncomfortable batch, sure enough, MY uncle or my uncle, this way is really not feasible, to reduce the amount of code has no effect.

In the spirit of discovery, I decided to try again, and something might happen.

Second attempt:

I decided to deconstruct the environment and assign it, and then judge it. See the code for the implementation:

    const { TARO_ENV } = process.env;
    
    / / componentDidMount hook
    if (TARO_ENV === 'weapp') {... }if (TARO_ENV === 'alipay') {... }// render
    {
      TARO_ENV === 'weapp'. } { TARO_ENV ==='alipay'. }Copy the code

Sick, I’m sick. Toss is toss, but the result is the original result. However, it is not without gains. Firstly, it deepens the impression of this optimization point, and secondly, it confirms the official meaning of direct use of process.env.

conclusion

Ok, we end here, Taro package optimization has a long way to go, AND I have just begun the journey. You are welcome to communicate in the comments section below.