Taro 3.5 beta compiles faster, supports Webpack5, React 18...

Compilation speed has always been a top problem for developers. Even after adding cache-loader , thread-loader and other optimization methods for large-scale Taro projects at this stage, the compilation time is still high. Therefore, in the v3.5 version, Taro focused on refactoring the compilation system, introducing support for Webpack5, and improving the performance and experience of small programs & H5 compilation. (In addition, Taro is also implementing support for Vite, and developers will be free to choose compilation tools.)

At the same time, Taro v3.5 also brings new features such as compatibility with React 18, H5 MPA, etc. Students are welcome to upgrade and try~

1. Speed up compilation

In order to improve compilation performance, Taro mainly does the following:

• Support Webpack5
• Dependency precompilation based on module federation
• Support to use esbuild to compress JS, use esbuild or @parcel/css compress CSS
• Use @swc/register instead of @babel/register

Next, we will briefly talk about Webpack5 and dependency pre-compilation. For the complete implementation details of compilation speedup, please refer to the RFC document .

1. Webpack5

It has been two years since Webpack5 was released, and its functions are stable enough. At the same time, its features such as persistent caching, module binding, and better Tree Shaking provide a better solution for the compilation process of the project.

Among them, the persistent cache function is one of the most important features, which can greatly improve the speed of recompilation. But it also introduces the question of how to invalidate the cache.

Taro follows Webpack's philosophy of "compilation safety is more important than compilation speed" , and persistent caching is not enabled by default. After developers design a caching strategy, it is strongly recommended to enable persistent caching. Please refer to mini.cache for detailed configuration.

2. Depends on precompile

Another important feature of Webpack5 is Module Federation . Inspired by the UmiJS mfsu feature, the project's node_modules dependencies can be packaged into a module federation remote application in advance. When compiling again, Webpack does not need to compile the dependencies, thereby improving the compilation speed.

Dependency precompilation can be divided into three steps:

1. Gather dependencies
2. package dependencies
3. Packaging the Module Federation Remote app

Taro Reference Vite uses esbuild to collect third-party dependencies used by users and package them separately. The packaged module will be used as the entry of Webpack, and finally packaged as a module federation Remote application for the main application (Host) to consume. Please refer to the RFC document for implementation details.

Taro will enable the dependency precompile function by default in the dev mode of the applet environment. When compiling for the first time, because esbuild is used to package third-party dependencies, it will be slightly faster than normal compilation. In the second compilation, Taro can directly reuse the Remote App, and Webpack only needs to compile the business code, so there will be different compilation speed-up effects according to different projects.

Depends on the precompiled flow chart:

3. Speed up effect

Take the NutUI component sample library as an example to test the speed-up effect of compiling WeChat applet in dev and prod environments:

As can be seen:

1. In the dev environment, because Taro enables dependency pre-compilation by default, the first compilation speed of Webpack5 is slightly faster than that of Webpack4. The prod environment does not enable dependency pre-compilation by default, so the speed of the two is equivalent (and Webpack5 needs to write to the cache, which may be slightly slower than Webpack4).
2. Whether it is a dev or prod environment, in the optimal case of completely hitting the cache, the compilation speed of Webpack5 can be greatly improved. Even when modifying the source code causes some cache invalidations, the compilation speed is still much faster than the first compilation.

4. Use

After the old project is upgraded, the related dependencies of Webpack5 need to be installed to compile normally. For details, please refer to the [Upgrade Guide] section below.

Simply modify the compilation configuration of Taro to enable Webpack5, persistent cache, dependency pre-compilation and other functions:

 /** config/index.js */
const config = {  
    // 自定义编译工具，可选 'Webpack4' 或 'Webpack5' 
    compiler: {       
        type: 'webpack5',   
        // 依赖预编译配置     
        prebundle: {
            enable: true    
        }  
    },  
    // 持久化缓存配置  
    cache: {
        enable: true  
    }
}

2. Compatible with React18

React officially released the react v18 version, which brought many new features such as Automatic Batching, Transitions and Concurrent, which improved the performance of React. Taro also completed React18 compatibility for the first time.

React currently has two working modes: legacy and concurrent . In concurrent mode, components are rendered using the New Client API.

Taro react will still run in legacy mode by default. Simple modification @tarojs/plugin-framework-react plug-in configuration to enable concurrent mode:

 /** config/index.js */
const config = {
  plugins: [
    ['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }]
  ]
}

Don't forget to upgrade your project's react version to v18

For details, please refer to discussions

3. Support server-side rendering (SSR)

1. Motivation

Compared with SPA (Single-Page Application), server-side rendering (SSR) can bring faster rendering speed of the first screen and better SEO, so the SSR function is a feature that everyone expects Taro to support one.

2. Implementation principle

Taro put forward the idea of open architecture in version 3.1, so that developers can make Taro support a new platform by writing plug-ins.

Through the Taro plugin, the well-known Next.js framework in the React ecosystem is used as a new target platform for Taro, so that Taro can support server-side rendering (SSR).

The current address of this plugin project is located at: SyMind/tarojs-plugin-platform-nextjs

⚠️ The plugin is currently in early construction and not recommended for production environments!

3. Installation and use

Install the plugin and Next.js framework.

 # 使用 npm 安装插件与 next.js
npm install tarojs-plugin-platform-nextjs next

# 使用 pnpm 安装插件与 next.js
pnpm install tarojs-plugin-platform-nextjs next

Add this plugin to the build configuration of the Taro project.

 const config = {
  plugins: [
    'tarojs-plugin-platform-nextjs'
  ]
}

Start trying it out!

 npx taro build --type nextjs --watch

Fourth, support multi-page applications (MPA)

Many students found by reading Taro's source code that Taro used to support too many page applications in 1.x. This feature can be enabled by configuring the multi mode, but because there is no good support and no corresponding business Scenario tests, which are ultimately not presented in the documentation.

When 2.x was released, we rolled back this feature for various reasons, although developers can still achieve similar requirements through plugins or custom webpack configuration within the project, but this will still be difficult to handle in some details. Perfection. For example, additional configuration file splitting rules are required to avoid redundant code, and MPA does not need taro-router to provide support for routing-related event methods...

MPA is one of the important features pursued by many community developers. For this reason, we have rewritten taro-loader and taro-router to meet the individual needs of this mode, and only need to apply this mode Configure as follows:

 module.exports = {
  // ...
  h5: {
    // ...
    router: {
      mode: 'multi'
    }
  }
}

It should be noted that many small program events and methods are designed and used based on the SPA mode, which is not applicable in the MPA mode, so there will be some problems, such as the TabBar will be repeatedly loaded due to multiple pages, and the App-level life cycle will be Repeated triggering, routing animation is not supported, and the production loop also requires additional configuration of routing mapping, etc. Before enabling this mode, you need to carefully consider the applicable scenarios.

5. The RN -related dependency library is upgraded from unimodules to expo

Expo is an important role in the React Native ecosystem. It provides many excellent modules, which are widely used in Taro, such as expo-av, expo-camera, etc. We will continue to access new modules in the future. Expo's module system has been changed from unimodules to expo for some time. The reason for the change in architecture can be found in the article: What's new in Expo modules infrastructure .

Taro v3.5 and later will use the new module system, and the react-native template experience can be selected through taro init. If you are using the Taro shell project, you can switch to the 0.67.0-expo branch experience.

If the old and new versions of Taro and shell projects are mixed, there will be incompatibility. The main reason is that there are multiple versions of native dependencies, which can be solved by version locking through resolution, and the corresponding version can be found here .

Subsequent shell projects will no longer contain the unimodules version. Please refer to this PR for older version upgrades.

Note: Upgrading to expo will no longer support iOS 11, please refer to the discussions for details.

6. Upgrade Guide

1. Install the CLI tools for v3.5.0-beta:

 npm i -g @tarojs/cli@beta

2. Update project dependencies

If the installation fails or the project fails to open, you can delete node_modules, yarn.lock, package-lock.json and then reinstall the dependencies and try again.

2.1 Modify the version of Taro related dependencies in the package.json file to 3.5.0@beta

2.2 Breakings

• Vue2 project needs to add devDenpendencies: "@vue/babel-preset-jsx": "^1.2.4”
• Vue3 projects need to add devDenpendencies: "@vue/babel-plugin-jsx": "^1.0.6"

• React projects need to add devDenpendencies:

   "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
  "react-refresh": "0.11.0"

• The PReact project needs to add devDenpendencies:

   "@prefresh/webpack": "^3.2.3",
  "@prefresh/babel-plugin": "^0.4.1"

2.3 Reinstall dependencies

3. Using Webpack5

When creating a new project, select the compilation tool as "webpack5" .

After upgrading the old project, you need to update the dependencies:

• It is recommended to delete node_modules , yarn.lock , package-lock.json .
• package.json remove @tarojs/mini-runner and @tarojs/webpack-runner dependency, add @tarojs/webpack5-runner dependency.
• Reinstall dependencies.
• Add compiler: 'webpack5' to the Taro compilation configuration, and finally start the compilation.

At last

Next, we will continue to iterate on the v3.5 version, including implementing H5's dependency precompilation. In the v3.6 version, it will support Vite and optimize runtime performance.

Last but not least, I would like to express my heartfelt thanks to the students who participated in the Taro open source co-construction! In order to establish a more complete and sustainable Taro open source ecosystem and highlight the value of contributors, Taro has launched a clearer participation mechanism and honor incentive mechanism . More students are welcome to participate~