Skip to content

Commit d843a50

Browse files
robinv8robinv8
authored
chore(examples): 添加按需加载组件示例 (#1723)
1 parent 27a5fd0 commit d843a50

24 files changed

+16472
-176
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ test/__mock__/
1919
git_stats/
2020
yarn-offline/
2121
docs/
22+
examples/

‎examples/lazy-load-component/.eslintrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": ["taro/react"],
3+
"rules": {
4+
"react/jsx-uses-react": "off",
5+
"react/react-in-jsx-scope": "off"
6+
}
7+
}

‎examples/lazy-load-component/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
dist/
2+
deploy_versions/
3+
.temp/
4+
.rn_temp/
5+
node_modules/
6+
.DS_Store
7+
.swc

‎examples/lazy-load-component/README.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# 按需引入样式
2+
3+
## 方式 1
4+
在页面样式或全局样式中 import 需要的组件样式
5+
6+
```scss
7+
@import '~taro-ui/dist/style/components/button.scss';
8+
```
9+
10+
## 方式 2
11+
通过 babel 插件按需引入组件
12+
13+
[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
14+
15+
```bash
16+
# 安装插件
17+
npm i babel-plugin-import -D
18+
```
19+
20+
在.babelrc 或 babel.config.js 中添加配置：
21+
22+
```js
23+
{
24+
"plugins": [
25+
[
26+
'import',
27+
{
28+
libraryName: 'taro-ui',
29+
customName: name => `taro-ui/lib/components/${name.slice(3)}`,
30+
customStyleName: name => `taro-ui/dist/style/components/${name.slice(3)}.scss`
31+
},
32+
'taro-ui'
33+
]
34+
]
35+
}
36+
```
37+
38+
接下来你直接在代码中引入组件而无需引入样式，插件会自动将代码转化为按需引入的形式。
39+
40+
```js
41+
// 原始代码
42+
import { AtButton } from 'taro-ui'
43+
44+
// 编译后代码
45+
import AtButton from 'taro-ui/lib/components/button'
46+
import 'taro-ui/dist/style/components/button.scss'
47+
```
48+
49+
## 注意事项
50+
在 taro3.5 之后的版本中，在开启 `prebundle` (默认开启)的情况下，会导致 taro-ui 所引用的 @taro/components 组件没有被打进最终的 bundle 中，导致页面表现异常。
51+
52+
为了解决上述问题，可以手动将 taro-ui 排除在 prebundle 列表之外。在 taro 项目的 `config/index.js` 中新增如下配置项：
53+
54+
```js
55+
module.exports = {
56+
// ...
57+
framework: 'react',
58+
compiler: {
59+
type: 'webpack5',
60+
prebundle: {
61+
exclude: ['taro-ui']
62+
}
63+
},
64+
}
65+
```

‎examples/lazy-load-component/babel.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// babel-preset-taro 更多选项和默认值：
2+
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
3+
module.exports = {
4+
presets: [
5+
[
6+
"taro",
7+
{
8+
framework: "react",
9+
ts: true,
10+
},
11+
],
12+
],
13+
// plugins: [
14+
// [
15+
// "import",
16+
// {
17+
// libraryName: "taro-ui",
18+
// customName: (name) => `taro-ui/lib/components/${name.slice(3)}`,
19+
// customStyleName: (name) =>
20+
// `taro-ui/dist/style/components/${name.slice(3)}.scss`,
21+
// },
22+
// "taro-ui",
23+
// ],
24+
// ],
25+
};

‎examples/lazy-load-component/config/dev.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
env: {
3+
NODE_ENV: '"development"'
4+
},
5+
defineConstants: {
6+
},
7+
mini: {},
8+
h5: {}
9+
}

‎examples/lazy-load-component/config/index.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
const config = {
2+
projectName: 'taro-ui-sass',
3+
date: '2023-12-8',
4+
designWidth: 750,
5+
deviceRatio: {
6+
640: 2.34 / 2,
7+
750: 1,
8+
828: 1.81 / 2
9+
},
10+
sourceRoot: 'src',
11+
outputRoot: 'dist',
12+
plugins: [],
13+
defineConstants: {
14+
},
15+
copy: {
16+
patterns: [
17+
],
18+
options: {
19+
}
20+
},
21+
framework: 'react',
22+
compiler: {
23+
type: 'webpack5',
24+
prebundle: {
25+
enable: false,
26+
}
27+
},
28+
cache: {
29+
enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
30+
},
31+
mini: {
32+
postcss: {
33+
pxtransform: {
34+
enable: true,
35+
config: {
36+
37+
}
38+
},
39+
url: {
40+
enable: true,
41+
config: {
42+
limit: 1024 // 设定转换尺寸上限
43+
}
44+
},
45+
cssModules: {
46+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
47+
config: {
48+
namingPattern: 'module', // 转换模式，取值为 global/module
49+
generateScopedName: '[name]__[local]___[hash:base64:5]'
50+
}
51+
}
52+
}
53+
},
54+
h5: {
55+
publicPath: '/',
56+
staticDirectory: 'static',
57+
postcss: {
58+
autoprefixer: {
59+
enable: true,
60+
config: {
61+
}
62+
},
63+
cssModules: {
64+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
65+
config: {
66+
namingPattern: 'module', // 转换模式，取值为 global/module
67+
generateScopedName: '[name]__[local]___[hash:base64:5]'
68+
}
69+
}
70+
}
71+
},
72+
rn: {
73+
appName: 'taroDemo',
74+
postcss: {
75+
cssModules: {
76+
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
77+
}
78+
}
79+
}
80+
}
81+
82+
module.exports = function (merge) {
83+
if (process.env.NODE_ENV === 'development') {
84+
return merge({}, config, require('./dev'))
85+
}
86+
return merge({}, config, require('./prod'))
87+
}

‎examples/lazy-load-component/config/prod.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
module.exports = {
2+
env: {
3+
NODE_ENV: '"production"'
4+
},
5+
defineConstants: {
6+
},
7+
mini: {},
8+
h5: {
9+
/**
10+
* WebpackChain 插件配置
11+
* @docs https://github.com/neutrinojs/webpack-chain
12+
*/
13+
// webpackChain (chain) {
14+
// /**
15+
// * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
16+
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
17+
// */
18+
// chain.plugin('analyzer')
19+
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
20+
21+
// /**
22+
// * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
23+
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
24+
// */
25+
// const path = require('path')
26+
// const Prerender = require('prerender-spa-plugin')
27+
// const staticDir = path.join(__dirname, '..', 'dist')
28+
// chain
29+
// .plugin('prerender')
30+
// .use(new Prerender({
31+
// staticDir,
32+
// routes: [ '/pages/index/index' ],
33+
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
34+
// }))
35+
// }
36+
}
37+
}

‎examples/lazy-load-component/package.json

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"name": "taro-ui-sass",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "",
6+
"templateInfo": {
7+
"name": "default",
8+
"typescript": true,
9+
"css": "sass"
10+
},
11+
"scripts": {
12+
"build:weapp": "taro build --type weapp",
13+
"build:swan": "taro build --type swan",
14+
"build:alipay": "taro build --type alipay",
15+
"build:tt": "taro build --type tt",
16+
"build:h5": "taro build --type h5",
17+
"build:rn": "taro build --type rn",
18+
"build:qq": "taro build --type qq",
19+
"build:jd": "taro build --type jd",
20+
"build:quickapp": "taro build --type quickapp",
21+
"dev:weapp": "npm run build:weapp -- --watch",
22+
"dev:swan": "npm run build:swan -- --watch",
23+
"dev:alipay": "npm run build:alipay -- --watch",
24+
"dev:tt": "npm run build:tt -- --watch",
25+
"dev:h5": "npm run build:h5 -- --watch",
26+
"dev:rn": "npm run build:rn -- --watch",
27+
"dev:qq": "npm run build:qq -- --watch",
28+
"dev:jd": "npm run build:jd -- --watch",
29+
"dev:quickapp": "npm run build:quickapp -- --watch"
30+
},
31+
"browserslist": [
32+
"last 3 versions",
33+
"Android >= 4.1",
34+
"ios >= 8"
35+
],
36+
"author": "",
37+
"dependencies": {
38+
"@babel/runtime": "^7.7.7",
39+
"@tarojs/components": "3.6.2",
40+
"@tarojs/helper": "3.6.2",
41+
"@tarojs/plugin-framework-react": "3.6.2",
42+
"@tarojs/plugin-platform-alipay": "3.6.2",
43+
"@tarojs/plugin-platform-h5": "3.6.2",
44+
"@tarojs/plugin-platform-jd": "3.6.2",
45+
"@tarojs/plugin-platform-qq": "3.6.2",
46+
"@tarojs/plugin-platform-swan": "3.6.2",
47+
"@tarojs/plugin-platform-tt": "3.6.2",
48+
"@tarojs/plugin-platform-weapp": "3.6.2",
49+
"@tarojs/react": "3.6.2",
50+
"@tarojs/runtime": "3.6.2",
51+
"@tarojs/shared": "3.6.2",
52+
"@tarojs/taro": "3.6.2",
53+
"react": "^18.0.0",
54+
"react-dom": "^18.0.0",
55+
"taro-ui": "^3.2.0"
56+
},
57+
"devDependencies": {
58+
"@babel/core": "^7.8.0",
59+
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
60+
"@tarojs/cli": "3.6.2",
61+
"@tarojs/webpack5-runner": "3.6.2",
62+
"@types/react": "^18.0.0",
63+
"@types/webpack-env": "^1.13.6",
64+
"@typescript-eslint/eslint-plugin": "^5.20.0",
65+
"@typescript-eslint/parser": "^5.20.0",
66+
"babel-plugin-import": "^1.13.8",
67+
"babel-preset-taro": "3.6.2",
68+
"eslint": "^8.12.0",
69+
"eslint-config-taro": "3.6.2",
70+
"eslint-plugin-import": "^2.12.0",
71+
"eslint-plugin-react": "^7.8.2",
72+
"eslint-plugin-react-hooks": "^4.2.0",
73+
"postcss": "^8.4.18",
74+
"react-refresh": "^0.11.0",
75+
"stylelint": "^14.4.0",
76+
"typescript": "^4.1.0",
77+
"webpack": "5.69.0"
78+
},
79+
"resolutions": {
80+
"@swc/core": "1.3.42"
81+
}
82+
}

‎examples/lazy-load-component/project.config.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"miniprogramRoot": "dist/",
3+
"projectname": "taro-ui-sass",
4+
"description": "",
5+
"appid": "wx7a42c5ab005bd5c8",
6+
"setting": {
7+
"urlCheck": true,
8+
"es6": false,
9+
"enhance": false,
10+
"compileHotReLoad": false,
11+
"postcss": false,
12+
"minified": false,
13+
"babelSetting": {
14+
"ignore": [],
15+
"disablePlugins": [],
16+
"outputPath": ""
17+
}
18+
},
19+
"compileType": "miniprogram",
20+
"libVersion": "3.2.4",
21+
"srcMiniprogramRoot": "dist/",
22+
"packOptions": {
23+
"ignore": [],
24+
"include": []
25+
},
26+
"condition": {},
27+
"editorSetting": {
28+
"tabIndent": "insertSpaces",
29+
"tabSize": 4
30+
}
31+
}

0 commit comments

Comments
 (0)