From ca6f07e59d4433d56ff0cef6be1dbcc62505d8fd Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 18 Dec 2018 08:42:10 -0500 Subject: [PATCH 1/4] environment variable to disable inlining images Fixes #3437 --- .../docs/adding-images-fonts-and-files.md | 6 +++++ docusaurus/docs/advanced-configuration.md | 27 ++++++++++--------- .../react-scripts/config/webpack.config.js | 6 ++++- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index c481d96c75d..f5d3d458666 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -9,6 +9,12 @@ You can **`import` a file right in a JavaScript module**. This tells Webpack to To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). +To override the default set the environment variable `IMAGE_INLINE_SIZE_LIMIT`. For example: + +```bash +IMAGE_INLINE_SIZE_LIMIT=5000 npm run build +``` + Here is an example: ```js diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 343740b9a5a..e7a8324d827 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -5,16 +5,17 @@ title: Advanced Configuration You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). -| Variable | Development | Production | Usage | -| :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | -| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | -| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | -| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | -| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application. | -| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | -| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | -| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | -| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | -| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| Variable | Development | Production | Usage | +| :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | +| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | +| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | +| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | +| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application. | +| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | +| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | +| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | +| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | +| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | Images smaller than 10,000 bytes are encoded as data-URI in base64 and inlined in the CSS or JS build artifact. Set this to control the minimum size limit. Setting it to 0 will make all images left as reference. | diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index ed85b555ea6..23072d25481 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -41,6 +41,10 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; +const imageInlineSizeLimit = parseInt( + process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' +); + // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); @@ -336,7 +340,7 @@ module.exports = function(webpackEnv) { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { - limit: 10000, + limit: imageInlineSizeLimit, name: 'static/media/[name].[hash:8].[ext]', }, }, From 0aec3f4cbef2db854fa48ca31dad7cccc7897201 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 18 Dec 2018 08:42:10 -0500 Subject: [PATCH 2/4] environment variable to disable inlining images Fixes #3437 --- .../docs/adding-images-fonts-and-files.md | 6 +++++ docusaurus/docs/advanced-configuration.md | 27 ++++++++++--------- .../react-scripts/config/webpack.config.js | 6 ++++- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index c481d96c75d..f5d3d458666 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -9,6 +9,12 @@ You can **`import` a file right in a JavaScript module**. This tells Webpack to To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). +To override the default set the environment variable `IMAGE_INLINE_SIZE_LIMIT`. For example: + +```bash +IMAGE_INLINE_SIZE_LIMIT=5000 npm run build +``` + Here is an example: ```js diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 70ad7ebfb30..b879d2669ec 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -7,16 +7,17 @@ You can adjust various development and production settings by setting environmen > Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables. -| Variable | Development | Production | Usage | -| :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | -| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | -| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | -| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | -| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | -| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | -| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | -| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | -| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | -| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| Variable | Development | Production | Usage | +| :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| BROWSER | βœ… Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | +| HOST | βœ… Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | +| PORT | βœ… Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | +| HTTPS | βœ… Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | +| PUBLIC_URL | 🚫 Ignored | βœ… Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application. | +| CI | βœ… Used | βœ… Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | +| REACT_EDITOR | βœ… Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | +| CHOKIDAR_USEPOLLING | βœ… Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | +| GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | +| NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | +| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | Images smaller than 10,000 bytes are encoded as data-URI in base64 and inlined in the CSS or JS build artifact. Set this to control the minimum size limit. Setting it to 0 will make all images left as reference. | diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index c569868fdfa..7ba37490976 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -41,6 +41,10 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // makes for a smoother build process. const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; +const imageInlineSizeLimit = parseInt( + process.env.IMAGE_INLINE_SIZE_LIMIT || '10000' +); + // Check if TypeScript is setup const useTypeScript = fs.existsSync(paths.appTsConfig); @@ -336,7 +340,7 @@ module.exports = function(webpackEnv) { test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], loader: require.resolve('url-loader'), options: { - limit: 10000, + limit: imageInlineSizeLimit, name: 'static/media/[name].[hash:8].[ext]', }, }, From c3a7e6cfc8ac91fa6e85a09e9ee8e20ed28f3bcc Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Fri, 14 Jun 2019 10:02:33 -0700 Subject: [PATCH 3/4] Update adding-images-fonts-and-files.md --- docusaurus/docs/adding-images-fonts-and-files.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index 722451d65f2..deb6cc39f89 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -7,13 +7,7 @@ With Webpack, using static assets like images and fonts works similarly to CSS. You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF. -To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). - -To override the default set the environment variable `IMAGE_INLINE_SIZE_LIMIT`. For example: - -```bash -IMAGE_INLINE_SIZE_LIMIT=5000 npm run build -``` +To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). You can control the 10,000 byte threshold by setting the `IMAGE_INLINE_SIZE_LIMIT` environment variable as documented in our [advanced configuration](advanced-configuration.md). Here is an example: From 00eb51765d8b914e80d711da8026a1514006e8e0 Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Mon, 17 Jun 2019 21:02:57 -0700 Subject: [PATCH 4/4] Update advanced-configuration.md --- docusaurus/docs/advanced-configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index 28a28534e10..413bca5051b 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -20,4 +20,4 @@ You can adjust various development and production settings by setting environmen | GENERATE_SOURCEMAP | 🚫 Ignored | βœ… Used | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines. | | NODE_PATH | βœ… Used | βœ… Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | | INLINE_RUNTIME_CHUNK | 🚫 Ignored | βœ… Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | -| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | Images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the minimum size limit in bytes. Setting it to 0 will disable the inlining of images. | +| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | βœ… Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. |