Taro Compiler Optimization Plugin

1.0.4 verified Fri May 01 auth: no javascript

A Taro plugin that accelerates compilation and bundling speed using multi-core processing and caching. Current version 1.0.4. It leverages thread-loader for parallelizing tasks and cache-loader for caching SCSS compilation results, reducing build time from minutes to under a minute for large projects. Only supports Taro 3, React, and SCSS; does not support Vue or H5 builds due to thread-loader limitations. It is an essential performance tool for Taro React projects.

Common errors

error Cannot find module 'thread-loader' ↓

cause thread-loader not installed as devDependency

fix

Run npm install --save-dev thread-loader

error Cannot find module 'cache-loader' ↓

cause cache-loader not installed as devDependency

fix

Run npm install --save-dev cache-loader

error TypeError: Plugin is not a function ↓

cause Plugin not installed or misconfigured in plugins array

fix

Ensure the package is installed and the plugins entry is an array with a string name and options object.

Warnings

breaking Only supports Taro 3 and React techn stack. ↓

fix Ensure project uses Taro 3 and React. Use only in React projects; Vue not supported.

breaking CSS caching only works with SCSS syntax. ↓

fix Use SCSS for styling; other CSS preprocessors (Less, Sass) are not cached.

breaking Does not support Vue framework or H5 builds due to thread-loader limitations. ↓

fix Only use this plugin with React native/mini-program builds. For H5, do not include this plugin.

gotcha Options object must be provided even if empty; otherwise error. ↓

fix Use ['taro-plugin-compiler-optimization', { closeScssCache: false }] instead of just the string.

gotcha Plugin order in plugins array may affect performance. ↓

fix Place this plugin after other plugins if possible, or at the start. No strict requirement documented.

Install

npm install taro-plugin-compiler-optimization

yarn add taro-plugin-compiler-optimization

pnpm add taro-plugin-compiler-optimization

Imports

plugin
wrong
```
plugins: ['taro-plugin-compiler-optimization']
```
correct
```
plugins: [['taro-plugin-compiler-optimization', { closeScssCache: false }]]
```
Must be an array with the plugin name and options object, not just a string. Inserted in Taro's config/index.js plugins array.

default

wrong

import CompilerOptimizationPlugin from 'taro-plugin-compiler-optimization'

correct

const CompilerOptimizationPlugin = require('taro-plugin-compiler-optimization')

CommonJS require is the correct usage in Taro config files; ESM import may not work. Plugin is used by string name, not imported directly.

options type

wrong

type PluginOptions = { closeScssCache: boolean }

correct

type PluginOptions = { closeScssCache?: boolean }

The options object is optional; closeScssCache defaults to false if omitted.

Quickstart

Install required loaders and plugin, then add to Taro config's plugins array with options object.

npm install --save-dev thread-loader cache-loader taro-plugin-compiler-optimization

// config/index.js
module.exports = {
  // ...
  plugins: [
    ['taro-plugin-compiler-optimization', {
      closeScssCache: false
    }]
  ]
}