xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(升级react18):

Browse Source
This commit is contained in:
czm 2022-09-05 13:17:29 +08:00
parent 76dca1ef45
commit 25aff4f481
8 changed files with 14836 additions and 51571 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
config/index.js
View File

@ -42,7 +42,10 @@ const config = {
}, },
sourceRoot: 'src', sourceRoot: 'src',
outputRoot: 'dist', outputRoot: 'dist',
plugins: [['@tarojs/plugin-mini-ci', CIPluginOpt]], plugins: [
['@tarojs/plugin-mini-ci', CIPluginOpt],
['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }],
],
defineConstants: { defineConstants: {
CURRENT_VERSION: JSON.stringify(CURRENT_VERSION), CURRENT_VERSION: JSON.stringify(CURRENT_VERSION),
CURRENT_GITHASH: JSON.stringify(CURRENT_GITHASH), 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) { module.exports = function (merge) {

35876
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

161
package.json
View File

@ -1,81 +1,84 @@
{ {
"name": "EShop", "name": "EShop",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"description": "电子商城", "description": "电子商城",
"templateInfo": { "templateInfo": {
"name": "default", "name": "default",
"typescript": true, "typescript": true,
"css": "sass" "css": "sass"
}, },
"scripts": { "scripts": {
"build:weapp": "taro build --type weapp", "build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan", "build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay", "build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt", "build:tt": "taro build --type tt",
"build:h5": "taro build --type h5", "build:h5": "taro build --type h5",
"build:rn": "taro build --type rn", "build:rn": "taro build --type rn",
"build:qq": "taro build --type qq", "build:qq": "taro build --type qq",
"build:jd": "taro build --type jd", "build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp", "build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch", "dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch", "dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch", "dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch", "dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch", "dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch", "dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch", "dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch", "dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch",
"build:weapp:pre": "cross-env NODE_ENV=pre taro build --type weapp", "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", "dev:weapp:pre": "cross-env NODE_ENV=pre npm run build:weapp -- --watch",
"buildo:weapp:open": "taro build --type weapp --open", "buildo:weapp:open": "taro build --type weapp --open",
"build:weapp:upload": "taro build --type weapp --upload", "build:weapp:upload": "taro build --type weapp --upload",
"build:weapp:preview": "taro build --type weapp --preview" "build:weapp:preview": "taro build --type weapp --preview"
}, },
"browserslist": [ "browserslist": [
"last 3 versions", "last 3 versions",
"Android >= 4.1", "Android >= 4.1",
"ios >= 8" "ios >= 8"
], ],
"author": "", "author": "",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.7.7", "@babel/runtime": "^7.7.7",
"@tarojs/components": "3.3.10", "@tarojs/components": "3.5.5",
"@tarojs/plugin-framework-react": "^3.4.12", "@tarojs/mini-runner": "3.5.5",
"@tarojs/react": "3.3.10", "@tarojs/plugin-framework-react": "3.5.5",
"@tarojs/runtime": "3.3.10", "@tarojs/react": "3.5.5",
"@tarojs/taro": "3.3.10", "@tarojs/runtime": "3.5.5",
"big.js": "^6.1.1", "@tarojs/taro": "3.5.5",
"dayjs": "^1.11.3", "big.js": "^6.1.1",
"qs": "^6.10.3", "dayjs": "^1.11.3",
"react": "^17.0.0", "qs": "^6.10.3",
"react-dom": "^17.0.0", "react": "^18.2.0",
"react-redux": "^8.0.1", "react-dom": "^18.2.0",
"redux": "^4.2.0", "react-redux": "^8.0.1",
"redux-logger": "^3.0.6", "redux": "^4.2.0",
"redux-thunk": "^2.4.1", "redux-logger": "^3.0.6",
"tarojs": "^2.1.1" "redux-thunk": "^2.4.1",
}, "tarojs": "^2.1.1"
"devDependencies": { },
"@babel/core": "^7.8.0", "devDependencies": {
"@tarojs/mini-runner": "3.3.10", "@babel/core": "^7.8.0",
"@tarojs/plugin-mini-ci": "^3.5.1", "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
"@tarojs/plugin-react-devtools": "^3.4.13", "@tarojs/plugin-mini-ci": "^3.5.1",
"@tarojs/webpack-runner": "3.3.10", "@tarojs/plugin-react-devtools": "^3.4.13",
"@types/qs": "^6.9.7", "@tarojs/webpack5-runner": "^3.5.5",
"@types/react": "^17.0.2", "@types/qs": "^6.9.7",
"@types/webpack-env": "^1.13.6", "@types/react": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^4.15.1", "@types/webpack-env": "^1.13.6",
"@typescript-eslint/parser": "^4.15.1", "@typescript-eslint/eslint-plugin": "^4.15.1",
"babel-preset-taro": "3.3.10", "@typescript-eslint/parser": "^4.15.1",
"cross-env": "^7.0.3", "babel-preset-taro": "3.5.5",
"eslint": "^6.8.0", "cross-env": "^7.0.3",
"eslint-config-taro": "3.3.10", "eslint": "^6.8.0",
"eslint-plugin-import": "^2.12.0", "eslint-config-taro": "3.5.5",
"eslint-plugin-react": "^7.8.2", "eslint-plugin-import": "^2.12.0",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react": "^7.8.2",
"stylelint": "9.3.0", "eslint-plugin-react-hooks": "^4.2.0",
"typescript": "^4.1.0" "react-refresh": "0.11.0",
} "stylelint": "9.3.0",
"typescript": "^4.1.0",
"webpack": "^5.74.0"
}
} }

2
src/common/constant.js
View File

@ -13,7 +13,7 @@ export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // 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.5:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.7:50002/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 // CDN
// 生成密钥 // 生成密钥

1
src/components/LabAndImg/index.tsx
View File

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

111
src/components/LabAndImgShow/index.tsx
View File

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

82
src/pages/details/components/swiper/index.tsx
View File

@ -1,49 +1,57 @@
import { formatImgUrl } from "@/common/fotmat" import { formatImgUrl } from '@/common/fotmat'
import { Image, Swiper, SwiperItem, View } from "@tarojs/components" import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
import { useMemo, useRef, useState } from "react" import { useMemo, useRef, useState } from 'react'
import Taro from '@tarojs/taro' 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 = { type params = {
list?: item[] list?: item[]
} }
export default ({list = []}: params) => { export default ({ list = [] }: params) => {
const [pageIndex, setPageIndex] = useState(1) const [pageIndex, setPageIndex] = useState(1)
const pageRef = useRef<any>(null) const pageRef = useRef<any>(null)
const pageCount = useMemo(() => { const pageCount = useMemo(() => {
return list.length return list.length
},[list]) }, [list])
const formatImages = useMemo(() => { const formatImages = useMemo(() => {
return list?.map(item => formatImgUrl(item, '!w800')) return list?.map((item) => formatImgUrl(item, '!w800'))
}, [list]) }, [list])
const swiperChange = (e) => { const swiperChange = (e) => {
setPageIndex(e.detail.current + 1) setPageIndex(e.detail.current + 1)
} }
const onShowImage = () => { const onShowImage = () => {
Taro.previewImage({ Taro.previewImage({
current: formatImages[0], current: formatImages[0],
urls: formatImages urls: formatImages,
}) })
} }
return ( return (
<View className={styles.swiper}> <View className={styles.swiper}>
{list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}> {list.length > 0 && (
{list?.map((item) => { <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
return <SwiperItem > {list?.map((item) => {
<View className={styles.image_item} onClick={onShowImage}> return (
<Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image> <SwiperItem>
</View> <View className={styles.image_item} onClick={onShowImage}>
</SwiperItem> <Image mode='aspectFill' src={formatImgUrl(item, '!w400')}></Image>
})} </View>
</Swiper>} </SwiperItem>
{(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>
) )}
</View>
)
} }

9056
yarn.lock
View File

File diff suppressed because it is too large Load Diff