🎈 perf(升级react18):

2022-09-05 13:17:29 +08:00 · 2022-09-05 13:17:29 +08:00 · 25aff4f481
commit 25aff4f481
parent 76dca1ef45
8 changed files with 14836 additions and 51571 deletions
--- a/config/index.js
+++ b/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) {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,81 +1,84 @@
 {
-  "name": "EShop",
-  "version": "1.0.0",
-  "private": true,
-  "description": "电子商城",
-  "templateInfo": {
-    "name": "default",
-    "typescript": true,
-    "css": "sass"
-  },
-  "scripts": {
-    "build:weapp": "taro build --type weapp",
-    "build:swan": "taro build --type swan",
-    "build:alipay": "taro build --type alipay",
-    "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
-    "build:rn": "taro build --type rn",
-    "build:qq": "taro build --type qq",
-    "build:jd": "taro build --type jd",
-    "build:quickapp": "taro build --type quickapp",
-    "dev:weapp": "npm run build:weapp -- --watch",
-    "dev:swan": "npm run build:swan -- --watch",
-    "dev:alipay": "npm run build:alipay -- --watch",
-    "dev:tt": "npm run build:tt -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch",
-    "dev:rn": "npm run build:rn -- --watch",
-    "dev:qq": "npm run build:qq -- --watch",
-    "dev:jd": "npm run build:jd -- --watch",
-    "dev:quickapp": "npm run build:quickapp -- --watch",
-    "build:weapp:pre": "cross-env NODE_ENV=pre taro build --type weapp",
-    "dev:weapp:pre": "cross-env NODE_ENV=pre npm run build:weapp -- --watch",
-    "buildo:weapp:open": "taro build --type weapp --open",
-    "build:weapp:upload": "taro build --type weapp --upload",
-    "build:weapp:preview": "taro build --type weapp --preview"
-  },
-  "browserslist": [
-    "last 3 versions",
-    "Android >= 4.1",
-    "ios >= 8"
-  ],
-  "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",
-    "big.js": "^6.1.1",
-    "dayjs": "^1.11.3",
-    "qs": "^6.10.3",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^8.0.1",
-    "redux": "^4.2.0",
-    "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.4.1",
-    "tarojs": "^2.1.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.0",
-    "@tarojs/mini-runner": "3.3.10",
-    "@tarojs/plugin-mini-ci": "^3.5.1",
-    "@tarojs/plugin-react-devtools": "^3.4.13",
-    "@tarojs/webpack-runner": "3.3.10",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.2",
-    "@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",
-    "cross-env": "^7.0.3",
-    "eslint": "^6.8.0",
-    "eslint-config-taro": "3.3.10",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "stylelint": "9.3.0",
-    "typescript": "^4.1.0"
-  }
+	"name": "EShop",
+	"version": "1.0.0",
+	"private": true,
+	"description": "电子商城",
+	"templateInfo": {
+		"name": "default",
+		"typescript": true,
+		"css": "sass"
+	},
+	"scripts": {
+		"build:weapp": "taro build --type weapp",
+		"build:swan": "taro build --type swan",
+		"build:alipay": "taro build --type alipay",
+		"build:tt": "taro build --type tt",
+		"build:h5": "taro build --type h5",
+		"build:rn": "taro build --type rn",
+		"build:qq": "taro build --type qq",
+		"build:jd": "taro build --type jd",
+		"build:quickapp": "taro build --type quickapp",
+		"dev:weapp": "npm run build:weapp -- --watch",
+		"dev:swan": "npm run build:swan -- --watch",
+		"dev:alipay": "npm run build:alipay -- --watch",
+		"dev:tt": "npm run build:tt -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
+		"dev:rn": "npm run build:rn -- --watch",
+		"dev:qq": "npm run build:qq -- --watch",
+		"dev:jd": "npm run build:jd -- --watch",
+		"dev:quickapp": "npm run build:quickapp -- --watch",
+		"build:weapp:pre": "cross-env NODE_ENV=pre taro build --type weapp",
+		"dev:weapp:pre": "cross-env NODE_ENV=pre npm run build:weapp -- --watch",
+		"buildo:weapp:open": "taro build --type weapp --open",
+		"build:weapp:upload": "taro build --type weapp --upload",
+		"build:weapp:preview": "taro build --type weapp --preview"
+	},
+	"browserslist": [
+		"last 3 versions",
+		"Android >= 4.1",
+		"ios >= 8"
+	],
+	"author": "",
+	"dependencies": {
+		"@babel/runtime": "^7.7.7",
+		"@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": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-redux": "^8.0.1",
+		"redux": "^4.2.0",
+		"redux-logger": "^3.0.6",
+		"redux-thunk": "^2.4.1",
+		"tarojs": "^2.1.1"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.8.0",
+		"@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
+		"@tarojs/plugin-mini-ci": "^3.5.1",
+		"@tarojs/plugin-react-devtools": "^3.4.13",
+		"@tarojs/webpack5-runner": "^3.5.5",
+		"@types/qs": "^6.9.7",
+		"@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.5.5",
+		"cross-env": "^7.0.3",
+		"eslint": "^6.8.0",
+		"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",
+		"webpack": "^5.74.0"
+	}
 }
--- a/src/common/constant.js
+++ b/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
 // 生成密钥
--- a/src/components/LabAndImg/index.tsx
+++ b/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%需调整外层元素宽高
--- a/src/components/LabAndImgShow/index.tsx
+++ b/src/components/LabAndImgShow/index.tsx
@ -1,65 +1,64 @@
-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
-        title?: string //标题
-    },
-    show?: false|true
-    onClose?: () => void,
-    showNumber?: number, //图片显示张数，0不限制
+  value?: {
+    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不限制
 }
-export default ({value, show = false, onClose, showNumber = 1}: colorParams) => {
+export default ({ value, show = false, onClose, showNumber = 1 }: colorParams) => {
+  useEffect(() => {
+    if (show && rgbStyle) setLabShow(() => true)
+    if (show && value?.texture_url) onShowImage()
+    if (!show) setLabShow(() => false)
+  }, [show])

-    useEffect(() => {
-        if(show&&rgbStyle) setLabShow(() => true)
-        if(show&&value?.texture_url) onShowImage()
-        if(!show) setLabShow(() => false)
-    }, [show])
-
-    //显示颜色
-    const [labShow, setLabShow] = useState(false)
-    //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})`}
-        } else {
-            return null
-        } 
-    }, [value])
-
-    
-    //显示图片
-    const onShowImage = () => {
-        onClose?.()
-        let res: string[] = []
-        if(value?.texture_url) {
-            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  
-        })
+  //显示颜色
+  const [labShow, setLabShow] = useState(false)
+  //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})` }
+    } else {
+      return null
    }
+  }, [value])

-    return (
-        <>
-            {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>}
-        </>
-    )
-}
+  //显示图片
+  const onShowImage = () => {
+    onClose?.()
+    let res: string[] = []
+    if (value?.texture_url) {
+      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,
+    })
+  }
+
+  return (
+    <>
+      {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>
+      )}
+    </>
+  )
+}
--- a/src/pages/details/components/swiper/index.tsx
+++ b/src/pages/details/components/swiper/index.tsx
@ -1,49 +1,57 @@
-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'
+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[]
+  list?: item[]
 }

-export default ({list = []}: params) => {
-    const [pageIndex, setPageIndex] = useState(1)
-    const pageRef = useRef<any>(null)
+export default ({ list = [] }: params) => {
+  const [pageIndex, setPageIndex] = useState(1)
+  const pageRef = useRef<any>(null)

-    const pageCount = useMemo(() => {
-        return list.length
-    },[list])
+  const pageCount = useMemo(() => {
+    return list.length
+  }, [list])

-    const formatImages = useMemo(() => {
-        return list?.map(item => formatImgUrl(item, '!w800'))
-    }, [list])
+  const formatImages = useMemo(() => {
+    return list?.map((item) => formatImgUrl(item, '!w800'))
+  }, [list])

-    const swiperChange = (e) => {
-        setPageIndex(e.detail.current + 1)
-    }
+  const swiperChange = (e) => {
+    setPageIndex(e.detail.current + 1)
+  }

-    const onShowImage = () => {
-        Taro.previewImage({
-            current: formatImages[0], 
-            urls: formatImages  
-        })
-    }
-    
-    return (
-        <View className={styles.swiper}>
-            {list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
-                {list?.map((item) => {
-                    return <SwiperItem >
-                        <View className={styles.image_item} onClick={onShowImage}>
-                            <Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image>
-                        </View>
-                    </SwiperItem>
-                })}
-            </Swiper>}
-            {(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
+  const onShowImage = () => {
+    Taro.previewImage({
+      current: formatImages[0],
+      urls: formatImages,
+    })
+  }
+
+  return (
+    <View className={styles.swiper}>
+      {list.length > 0 && (
+        <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
+          {list?.map((item) => {
+            return (
+              <SwiperItem>
+                <View className={styles.image_item} onClick={onShowImage}>
+                  <Image mode='aspectFill' src={formatImgUrl(item, '!w400')}></Image>
+                </View>
+              </SwiperItem>
+            )
+          })}
+        </Swiper>
+      )}
+      {list.length > 0 && (
+        <View className={styles.page} ref={pageRef}>
+          {pageIndex + '/' + pageCount}
        </View>
-    )
-}
+      )}
+    </View>
+  )
+}
--- a/yarn.lock
+++ b/yarn.lock