|
| 1 | +## Approach 1: |
| 2 | + |
| 3 | +> pph-app-rewards-lib (js) |
| 4 | + >> pph-app-base-lib (js) -- include UI components, API client, Local storage and Security storage |
| 5 | +
|
| 6 | +(Maybe also need some native lib if necessary) |
| 7 | + |
| 8 | +**Why we need the base lib ?** |
| 9 | + |
| 10 | +1. Rewards dose not just include UI code, it also sends request. |
| 11 | + |
| 12 | +2. pph-app-rewards-lib should not directly include all the *api request*, *local storage* code. |
| 13 | + |
| 14 | +3. If we export rewards to HiSG, we also need to use the same way to integrate rewards. |
| 15 | + |
| 16 | +> ps: for the pph-app-base-lib can also be used in other pph apps (eo) |
| 17 | +
|
| 18 | + |
| 19 | +## Approach 2: split js bundle |
| 20 | + |
| 21 | +1. Demo |
| 22 | + |
| 23 | +2. Mechanism |
| 24 | + |
| 25 | +2.1 What‘s inside js bundle |
| 26 | +```js |
| 27 | +var __BUNDLE_START_TIME__=... |
| 28 | +... |
| 29 | +__d(function(...){},123,[]); |
| 30 | +... |
| 31 | +__d(function(a,s,t,e,n,r,u){n.exports={name:"statusbar",displayName:"statusbar"}},484,[]); |
| 32 | +__r(82); |
| 33 | +__r(0); |
| 34 | +``` |
| 35 | + |
| 36 | +2.2 What's the number used for (how __d function works) |
| 37 | +```js |
| 38 | +__d = function (r, i, n) { |
| 39 | + if (null != e[i]) return; |
| 40 | + var o = { |
| 41 | + dependencyMap: n, |
| 42 | + factory: r, |
| 43 | + hasError: !1, |
| 44 | + importedAll: t, |
| 45 | + importedDefault: t, |
| 46 | + isInitialized: !1, |
| 47 | + publicModule: { exports: {} } |
| 48 | + }; |
| 49 | + e[i] = o |
| 50 | +} |
| 51 | +``` |
| 52 | +> So the number is a global identifier for js module, but the number is random generated, if we need to split the js bundle we need to fix the id |
| 53 | +
|
| 54 | +`metro/src/lib/createModuleIdFactory.js` |
| 55 | +```js |
| 56 | +'use strict'; |
| 57 | + |
| 58 | +function createModuleIdFactory(): (path: string) => number { |
| 59 | + const fileToIdMap: Map<string, number> = new Map(); |
| 60 | + let nextId = 0; |
| 61 | + return (path: string) => { |
| 62 | + let id = fileToIdMap.get(path); |
| 63 | + if (typeof id !== 'number') { |
| 64 | + id = nextId++; |
| 65 | + fileToIdMap.set(path, id); |
| 66 | + } |
| 67 | + return id; |
| 68 | + }; |
| 69 | +} |
| 70 | + |
| 71 | +module.exports = createModuleIdFactory; |
| 72 | +``` |
| 73 | + |
| 74 | +2.3 Metro(react-native packaging tool) provide a way to customize the id generation. |
| 75 | + |
| 76 | +`metro.config.js` metro config file in the root dir of react-native project |
| 77 | + |
| 78 | +```js |
| 79 | +const createModuleIdFactory = require('./config/createModuleIdFactory'); |
| 80 | +module.exports = { |
| 81 | + transformer: { |
| 82 | + getTransformOptions: async () => ({ |
| 83 | + transform: { |
| 84 | + experimentalImportSupport: false, |
| 85 | + inlineRequires: false, |
| 86 | + }, |
| 87 | + }), |
| 88 | + }, |
| 89 | + serializer: { |
| 90 | + createModuleIdFactory: createModuleIdFactory |
| 91 | + } |
| 92 | +}; |
| 93 | +``` |
| 94 | + |
| 95 | +```js |
| 96 | +'use strict'; |
| 97 | +const path = require('path'); |
| 98 | +const pathSep = path.posix.sep; |
| 99 | + |
| 100 | +function createModuleIdFactory() { |
| 101 | + const fileToIdMap = new Map(); |
| 102 | + const projectRootPath = `${process.cwd()}`; |
| 103 | + return (path) => { |
| 104 | + let moduleName = ''; |
| 105 | + if (path.indexOf(`node_modules${pathSep}react-native${pathSep}Libraries${pathSep}`) > 0) { |
| 106 | + moduleName = path.substr(path.lastIndexOf(pathSep) + 1); |
| 107 | + } else if (path.indexOf(projectRootPath) === 0) { |
| 108 | + moduleName = path.substr(projectRootPath.length + 1); |
| 109 | + } |
| 110 | + moduleName = moduleName.replace('.js', ''); |
| 111 | + moduleName = moduleName.replace('.png', ''); |
| 112 | + let regExp = pathSep === '\\' ? new RegExp('\\\\', 'gm') : new RegExp(pathSep, 'gm'); |
| 113 | + moduleName = moduleName.replace(regExp, '_'); |
| 114 | + return moduleName; |
| 115 | + }; |
| 116 | +} |
| 117 | + |
| 118 | +module.exports = createModuleIdFactory; |
| 119 | +``` |
| 120 | + |
| 121 | +```js |
| 122 | +... |
| 123 | +__d( |
| 124 | + function (g, r, i, a, m, e, d) { |
| 125 | + var t = r(d[0]); |
| 126 | + Object.defineProperty(e, "__esModule", { value: !0 }), e.default = void 0; |
| 127 | + var o = t(r(d[1])), u = r(d[2]), n = u.StyleSheet.create({ image: { height: 24 } }); |
| 128 | + e.default = function (t) { |
| 129 | + var c = t.routeName, l = t.focused, f = { Home: r(l ? d[3] : d[4]), My: r(l ? d[5] : d[6]) }; |
| 130 | + return o.default.createElement(u.Image, { style: n.image, source: f[c], resizeMode: "contain" }) |
| 131 | + } |
| 132 | + }, |
| 133 | + "src_components_TabBarIcon_index", |
| 134 | + [ |
| 135 | + "node_modules_@babel_runtime_helpers_interopRequireDefault", |
| 136 | + "node_modules_react_index", |
| 137 | + "react-native-implementation", |
| 138 | + "src_assets_icons_home_fill", |
| 139 | + "src_assets_icons_home", |
| 140 | + "src_assets_icons_my_fill", |
| 141 | + "src_assets_icons_my" |
| 142 | + ] |
| 143 | +); |
| 144 | +... |
| 145 | +``` |
| 146 | + |
| 147 | +2.3 split jsbundle to base.bundle/app1.bundle/app2.bundle ... |
| 148 | + |
| 149 | +``` |
| 150 | +react-native bundle --platform ios --dev false --entry-file base.js --bundle-output build/ios/common.jsbundle --assets-dest build/ios/ |
| 151 | +
|
| 152 | +react-native bundle --platform ios --dev false --entry-file index.js --bundle-output build/ios/main_app_all.jsbundle --assets-dest build/ios/ |
| 153 | +
|
| 154 | +react-native bundle --platform ios --dev false --entry-file rewards/index.js --bundle-output build/ios/sub_app_all.jsbundle --assets-dest build/ios/ |
| 155 | +
|
| 156 | +node diff.js ./build/ios/common.jsbundle ./build/ios/main_app_all.jsbundle ./build/ios/main_app.jsbundle |
| 157 | +node diff.js ./build/ios/common.jsbundle ./build/ios/sub_app_all.jsbundle ./build/ios/sub_app.jsbundle |
| 158 | +``` |
| 159 | + |
| 160 | +2.4 Native cod |
| 161 | + |
0 commit comments