Learn How to Bundle Create React App in a Single File

by
Advertisements

Learn how to integrate all of the JavaScript and CSS files Create React App build into a single file. When you generate a production build for your React App, the output folder comprises the primary index.html page, as well as the corresponding JavaScript and CSS files, which are added to the /static/js and /static/css directories.

NE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false
SKIP_PREFLIGHT_CHECK=true

Next, create a gulpfile.js file in the root folder. Also How to Convert Numbers to Words using Indian Numbering in Google Sheets

const gulp = require('gulp');
const inlinesource = require('gulp-inline-source');
const replace = require('gulp-replace');

gulp.task('default', () => {
  return gulp
    .src('./build/*.html')
    .pipe(replace('.js"></script>', '.js" inline></script>'))
    .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
    .pipe(
      inlinesource({
        compress: false,
        ignore: ['png'],
      })
    )
    .pipe(gulp.dest('./build'));
});

The inline property will be added to the script> and link> tags by the gulp job. The inlinesource module will read the html file’s inline attributes and replace them with the actual content of the related files. Also Learn How to Suspend a Google Script to Avoid Limits

Advertisements

To produce an efficient production build for your React App, use npm run build or npx react-scripts build, and then use npx gulp to bundle all the JS and CSS files in the static build folder into a single main html file.

React App Inline

Leave a Comment