The reason of the slow-down/freezing lies in the generator functions that are used in our scheduling engine and that are transpiled for older javascript both in our schedulerpro.umd.js
and also React itself. The workaround is twofold:
React wrapper and the application has to be reconfigured to not use umd but module version of Bryntum SchedulerPro component. The easiest way is to copy wrappers from
npm
folder to your project and replace all imports frombryntum-schedulerpro/schedulerpro.umd
withbryntum-schedulerpro
both in all used wrappers and also the application files.This alone should lead to have development server without any transpilation and thus performant. You can try it with
npm start
and running athttps://localhost:3000
Now we need to ensure that React does not transpile generators. Unfortunately, Create React App scripts are not very configurable. Therefore we had to use the workaround. For this to work:
- run
npm i
- copy
node_modules/babel-preset-react-app
tobabel-preset-react-app-bry
at the same level as the project - edit file
../babel-preset-react-app-bry/dependencies.js
to comment all plugins at the end of file:plugins: [ // Disabled as it's handled automatically by preset-env, and `selectiveLoose` isn't // yet merged into babel: https://github.com/babel/babel/pull/9486 // Related: https://github.com/facebook/create-react-app/pull/8215 // [ // require('@babel/plugin-transform-destructuring').default, // { // // Use loose mode for performance: // // https://github.com/facebook/create-react-app/issues/5602 // loose: false, // selectiveLoose: [ // 'useState', // 'useEffect', // 'useContext', // 'useReducer', // 'useCallback', // 'useMemo', // 'useRef', // 'useImperativeHandle', // 'useLayoutEffect', // 'useDebugValue', // ], // }, // ], // Polyfills the runtime needed for async/await, generators, and friends // https://babeljs.io/docs/en/babel-plugin-transform-runtime // [ // require('@babel/plugin-transform-runtime').default, // { // corejs: false, // helpers: areHelpersEnabled, // // By default, babel assumes babel/runtime version 7.0.0-beta.0, // // explicitly resolving to match the provided helper functions. // // https://github.com/babel/babel/issues/10261 // version: require('@babel/runtime/package.json').version, // regenerator: true, // // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules // // We should turn this on once the lowest version of Node LTS // // supports ES Modules. // useESModules: isEnvDevelopment || isEnvProduction, // // Undocumented option that lets us encapsulate our runtime, ensuring // // the correct version is used // // https://github.com/babel/babel/blob/090c364a90fe73d36a30707fc612ce037bdbbb24/packages/babel-plugin-transform-runtime/src/index.js#L35-L42 // absoluteRuntime: absoluteRuntimePath, // }, // ], ].filter(Boolean),
- add
"babel-preset-react-app": "file:../babel-preset-react-app-bry"
topackage.json
,devDependencies
section. - change
browserlist
inpackage.json
to show:"browserslist": { "production": [ "last 1 chrome version" ],
remove
node_modules
andpackage-lock.json
and runnpm i npm run build
- add
- run
I have tested the resulting production build in latest Chrome, Edge@Mac, Firefox, Firefox ESR, Safari and it worked for me. Although, you cannot expect old Edge or IE 11 to work with this solution.