[REACT] Browser page freezing in Bryntum Scheduler PRO 1.0.2

Post by **saki** » Mon Nov 09, 2020 5:08 pm

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 from bryntum-schedulerpro/schedulerpro.umd with bryntum-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 at https://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 to babel-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" to package.json, devDependencies section.

change browserlist in package.json to show:

  "browserslist": {
    "production": [
      "last 1 chrome version"
    ],

remove node_modules and package-lock.json and run
```
npm i
npm run build
```

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.

Post by **support@bright** » Tue Nov 24, 2020 4:49 pm

It works much faster now! Thanks

Support Forum

[REACT] Browser page freezing in Bryntum Scheduler PRO 1.0.2