SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. # Gatsby Build Time Optimizations
  2.  
  3. Strategies to shorten build times for Gatsby websites.
  4.  
  5. ## Gatsby Image
  6.  
  7. ### Reduce number of breakpoints using `srcSetBreakpoints`
  8.  
  9. `srcSetBreakpoints` sets the quantity and dimensions of the images provided to
  10. the `srcset` property. By default, Gatsby Image (via `gatsby-plugin-sharp`)
  11. generates five images:
  12.  
  13. 1. `maxWidth` or `maxHeight` (note that there is a default value for this even
  14.    if not provded as an argument)
  15. 1. `maxWidth / 4` or `maxHeight / 4`
  16. 1. `maxWidth / 2` or `maxHeight / 2`
  17. 1. `maxWidth * 1.5` or `maxHeight * 1.5`
  18. 1. `maxWidth * 2` or `maxHeight * 2`
  19.  
  20. ```graphql
  21. fluid(maxWidth: 1000, srcSetBreakpoints: [400]) {
  22.   ...GatsbyImageSharpFluid_noBase64
  23. }
  24. ```
  25.  
  26. Set `srcSetBreakpoints` to as little values as possible (1 recommended). Note:
  27. setting this to an empty array will tell Gatsby Image to fallback to the
  28. default breakpoints.
  29.  
  30. ### Remove `base64` option
  31.  
  32. The base Gatsby Image fragments create a small placeholder image. This
  33. can increase build times as it adds yet another size to generate.
  34.  
  35. If image placeholders are not absolutely necessary, use the `*_noBase64`
  36. fragments instead.
  37.  
  38. ### Faster PNG compression with `pngCompressionSpeed`
  39.  
  40. `pngCompressionSpeed` determines the quality-to-speed ratio on a scale of 1-10.
  41. This option is set to 4 by default, but if build speed is the main priority,
  42. set this value to 10.
  43.  
  44. ```graphql
  45. fluid(pngCompressionSpeed: 10) {
  46.   ...GatsbyImageSharpFluid_noBase64
  47. }
  48. ```
  49.  
  50. ## Disabling full `node_modules` compilation
  51.  
  52. Gatsby virtually compiles all `node_modules` dependencies at build time using
  53. Babel. This can increase your build times as all JavaScript files will be
  54. transpiled, even if it already is ES5 compatible.
  55.  
  56. To exclude `node_modules` from compilation at build time, modify the Webpack
  57. configuration in `gatsby-node.js`.
  58.  
  59. **Note**: The following code is not confirmed to disable `node_modules`
  60. compilation and may not perform as intended.
  61.  
  62. ```js
  63. // gatsby-node.js
  64.  
  65. exports.onCreateWebpackConfig = async ({ getConfig, actions }) => {
  66.   const config = getConfig()
  67.  
  68.   config.module.rules.map(x => {
  69.     if (
  70.       String(x.test) === String(/\.(js|mjs|jsx)$/) ||
  71.       String(x.test) === String(/\.m?js$/) ||
  72.       String(x.test) === String(/\.(js|mjs)$/) // vendor dependencies
  73.     ) {
  74.       const y = x
  75.       y.exclude = [/node_modules/]
  76.       return y
  77.     }
  78.  
  79.     return x
  80.   })
  81.  
  82.   actions.replaceWebpackConfig({ ...config })
  83. }
  84. ```
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top