react-loadable VS laravel-mix

Website: https://github.com/jamiebuilds/react-loadable

React Loadable: This library makes it easy to split your React code into smaller, lazy-loaded chunks that can be loaded on demand. This can significantly improve the initial loading time of your application, especially for large and complex apps. https://github.com/jamiebuilds/react-loadable

I have a very simple React component that uses react-loadable to dynamically import another component. The code looks something akin to the following:

react-loadable - A higher order component for loading components with promises

It's very important that you are choosing an active project instead of a dead/unmaintained project. An active project improves over time through community feedback. An unmaintained project does not move forward, fix functional bugs or patch security issues. Sometimes, a very popular package can be abandoned and go into a "frozen" state with many open issues and pull requests. It might have been a great solution in the past, but this is a sign that we have to move on. An example is react-loadable. It was a great solution for a very long time for code-splitting in React. I totally loved it. But it's stale now with many issues and PRs since 2018 (this post is written at the end of 2021). Now, if I need to split code in React, I use loadable-components, which is in active development, becoming more popular, patches bugs reported by the community, and most importantly, solves my problems. My personal advice: choose a package that's active in the last 3-6 months, with issues that are being resolved and PRs that are being merged.

Preloading is possible with react-loadable: https://github.com/jamiebuilds/react-loadable#preloading

const path = require('path') const fs = require('fs-extra') const mix = require('laravel-mix') require('laravel-mix-versionhash') const tailwindcss = require('tailwindcss') // const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') mix .js('resources/js/app.js', 'public/dist/js').vue() .sass('resources/sass/app.scss', 'public/dist/css') .options({ processCssUrls: false, postCss: [tailwindcss('./tailwind.config.js')] }) .disableNotifications() if (mix.inProduction()) { mix // .extract() // Disabled until resolved: https://github.com/JeffreyWay/laravel-mix/issues/1889 // .version() // Use `laravel-mix-versionhash` for the generating correct Laravel Mix manifest file. .versionHash() } else { mix.sourceMaps() } mix.webpackConfig({ plugins: [ // new BundleAnalyzerPlugin() ], resolve: { extensions: ['.js', '.json', '.vue'], alias: { '~': path.join(__dirname, './resources/js') } }, output: { chunkFilename: 'dist/js/[chunkhash].js', path: path.resolve(__dirname, mix.inProduction() ? './public/build' : './public') } }) mix.then(() => { if (mix.inProduction()) { process.nextTick(() => publishAseets()) } }) function publishAseets () { const publicDir = path.resolve(__dirname, './public') fs.removeSync(path.join(publicDir, 'dist')) fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist')) fs.removeSync(path.join(publicDir, 'build')) }