🎈 perf(升级react18):

config/index.js

@@ -42,7 +42,10 @@ const config = {
   },
   sourceRoot: 'src',
   outputRoot: 'dist',
-  plugins: [['@tarojs/plugin-mini-ci', CIPluginOpt]],
+  plugins: [
+    ['@tarojs/plugin-mini-ci', CIPluginOpt],
+    ['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }],
+  ],
   defineConstants: {
     CURRENT_VERSION: JSON.stringify(CURRENT_VERSION),
     CURRENT_GITHASH: JSON.stringify(CURRENT_GITHASH),
@@ -91,6 +94,17 @@ const config = {
       },
     },
   },
+  compiler: {
+    type: 'webpack5',
+    // 依赖预编译配置
+    prebundle: {
+      enable: true,
+    },
+  },
+  // 持久化缓存配置
+  // cache: {
+  //   enable: true,
+  // },
 }
 
 module.exports = function (merge) {

package.json

@@ -41,16 +41,17 @@
 	"author": "",
 	"dependencies": {
 		"@babel/runtime": "^7.7.7",
-    "@tarojs/components": "3.3.10",
-    "@tarojs/plugin-framework-react": "^3.4.12",
-    "@tarojs/react": "3.3.10",
-    "@tarojs/runtime": "3.3.10",
-    "@tarojs/taro": "3.3.10",
+		"@tarojs/components": "3.5.5",
+		"@tarojs/mini-runner": "3.5.5",
+		"@tarojs/plugin-framework-react": "3.5.5",
+		"@tarojs/react": "3.5.5",
+		"@tarojs/runtime": "3.5.5",
+		"@tarojs/taro": "3.5.5",
 		"big.js": "^6.1.1",
 		"dayjs": "^1.11.3",
 		"qs": "^6.10.3",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-redux": "^8.0.1",
 		"redux": "^4.2.0",
 		"redux-logger": "^3.0.6",
@@ -59,23 +60,25 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.8.0",
-    "@tarojs/mini-runner": "3.3.10",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
 		"@tarojs/plugin-mini-ci": "^3.5.1",
 		"@tarojs/plugin-react-devtools": "^3.4.13",
-    "@tarojs/webpack-runner": "3.3.10",
+		"@tarojs/webpack5-runner": "^3.5.5",
 		"@types/qs": "^6.9.7",
-    "@types/react": "^17.0.2",
+		"@types/react": "^18.0.0",
 		"@types/webpack-env": "^1.13.6",
 		"@typescript-eslint/eslint-plugin": "^4.15.1",
 		"@typescript-eslint/parser": "^4.15.1",
-    "babel-preset-taro": "3.3.10",
+		"babel-preset-taro": "3.5.5",
 		"cross-env": "^7.0.3",
 		"eslint": "^6.8.0",
-    "eslint-config-taro": "3.3.10",
+		"eslint-config-taro": "3.5.5",
 		"eslint-plugin-import": "^2.12.0",
 		"eslint-plugin-react": "^7.8.2",
 		"eslint-plugin-react-hooks": "^4.2.0",
+		"react-refresh": "0.11.0",
 		"stylelint": "9.3.0",
-    "typescript": "^4.1.0"
+		"typescript": "^4.1.0",
+		"webpack": "^5.74.0"
 	}
 }

src/common/constant.js

@@ -13,7 +13,7 @@ export const BASE_URL = CURRENT_BASE_URL
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket`  // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
-// export const BASE_URL = `http://192.168.1.42:50001/lymarket` //  杰
+// export const BASE_URL = `http://192.168.1.42:50002/lymarket` //  杰
 
 // CDN
 // 生成密钥

src/components/LabAndImg/index.tsx

@@ -3,7 +3,6 @@ import Preview from '@/pages/details/components/preview'
 import { Image, View } from '@tarojs/components'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-import Taro from '@tarojs/taro'
 import LabAndImgShow from '../LabAndImgShow'
 
 //该组件宽高为100%需调整外层元素宽高

src/components/LabAndImgShow/index.tsx

@@ -1,23 +1,21 @@
-import { formatImgUrl } from "@/common/fotmat"
-import { View } from "@tarojs/components"
-import { useEffect, useMemo, useState } from "react"
+import { formatImgUrl } from '@/common/fotmat'
+import { View } from '@tarojs/components'
+import { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import Taro from '@tarojs/taro'
 
-
 export type colorParams = {
   value?: {
-        texture_url?: string, //纹理图路径
-        lab?: {l:number, a:number, b:number}, //lab
-        rgb?: {r:number, g:number, b:number} //rgb
+    texture_url?: string //纹理图路径
+    lab?: { l: number; a: number; b: number } //lab
+    rgb?: { r: number; g: number; b: number } //rgb
     title?: string //标题
-    },
+  }
   show?: false | true
-    onClose?: () => void,
-    showNumber?: number, //图片显示张数，0不限制
+  onClose?: () => void
+  showNumber?: number //图片显示张数，0不限制
 }
 export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) => {
-
   useEffect(() => {
     if (show && rgbStyle) setLabShow(() => true)
     if (show && value?.texture_url) onShowImage()
@@ -29,37 +27,38 @@ export default ({value, show = false, onClose, showNumber = 1}: colorParams) =>
   //lab是否都是0
   const rgbStyle = useMemo(() => {
     if (value?.lab && (value.lab.l || value.lab.a || value.lab.b)) {
-            return {'backgroundColor':`rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})`}
+      return { backgroundColor: `rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})` }
     } else {
       return null
     }
   }, [value])
 
-    
   //显示图片
   const onShowImage = () => {
     onClose?.()
     let res: string[] = []
     if (value?.texture_url) {
-            res = value?.texture_url?.split(',').map(item => {
+      res = value?.texture_url?.split(',').map((item) => {
         return formatImgUrl(item)
       })
     }
     let n_res = showNumber == 0 ? res : res?.splice(0, showNumber)
     Taro.previewImage({
       current: n_res[0],
-            urls: n_res  
+      urls: n_res,
     })
   }
 
   return (
     <>
-            {labShow&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
+      {labShow && (
+        <View className={styles.main} catch-move='true' onClick={() => onClose?.()}>
           <View className={styles.con}>
             <View className={styles.rgb} style={rgbStyle!}></View>
             <View className={styles.name}>{value?.title}</View>
           </View>
-            </View>}
+        </View>
+      )}
     </>
   )
 }

src/pages/details/components/swiper/index.tsx

@@ -1,10 +1,10 @@
-import { formatImgUrl } from "@/common/fotmat"
-import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
-import { useMemo, useRef, useState } from "react"
+import { formatImgUrl } from '@/common/fotmat'
+import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
+import { useMemo, useRef, useState } from 'react'
 import Taro from '@tarojs/taro'
 import styles from './index.module.scss'
 
-type item = {title:string, img:string, url:string, id:number}
+type item = { title: string; img: string; url: string; id: number }
 type params = {
   list?: item[]
 }
@@ -18,7 +18,7 @@ export default ({list = []}: params) => {
   }, [list])
 
   const formatImages = useMemo(() => {
-        return list?.map(item => formatImgUrl(item, '!w800'))
+    return list?.map((item) => formatImgUrl(item, '!w800'))
   }, [list])
 
   const swiperChange = (e) => {
@@ -28,22 +28,30 @@ export default ({list = []}: params) => {
   const onShowImage = () => {
     Taro.previewImage({
       current: formatImages[0],
-            urls: formatImages  
+      urls: formatImages,
     })
   }
 
   return (
     <View className={styles.swiper}>
-            {list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
+      {list.length > 0 && (
+        <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
           {list?.map((item) => {
-                    return <SwiperItem >
+            return (
+              <SwiperItem>
                 <View className={styles.image_item} onClick={onShowImage}>
-                            <Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image>
+                  <Image mode='aspectFill' src={formatImgUrl(item, '!w400')}></Image>
                 </View>
               </SwiperItem>
+            )
           })}
-            </Swiper>}
-            {(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
+        </Swiper>
+      )}
+      {list.length > 0 && (
+        <View className={styles.page} ref={pageRef}>
+          {pageIndex + '/' + pageCount}
+        </View>
+      )}
     </View>
   )
 }