title: Compile times slow when developing modules for a Create React App with Lerna
body: <p>I'm working on a react boilerplate and have decided to modularise some of the components, making them private npm packages that we can include.</p>
  
  <p>For production these modular packages work fine but we now need to setup the dev environment to actually develop these (now they're no longer in the boilerplate).</p>
  
  <p>I initially had problems with npm link and peerDependencies (some of the modules have peerDepenencies of others) and it was troublesome because we ran into issues with duplicate copies of react and styled-components.</p>
  
  <p>Here's where Lerna stepped in, we decided we would use Lerna so that we could hoist and make use of the lerna link convert functionality to get around the duplicate dependencies issues... and it works!</p>
  
  <p>We have the boilerplate in the root and the modules in the /packages directory.</p>
  
  <p>So we run npm start from the root and the application fires up in the browser, all seems to be working fine.</p>
  
  <p>The issue we are now facing is that when we make changes to one of our modules and run npm run build for the component, it then takes a few minutes for the changes to take effect (which is horrendous).</p>
  
  <p>It's not the build that takes a long time, its the react-scripts compiling....</p>
  
  <p>Does anyone have any experience with this? I've got a feeling we're doing something wrong. Any help would be massively appreciated!</p>
  
  <p>here's the output of <code>npm run build</code> of one of my components:
  `</p>
  
  <pre><code>[BABEL] Note: The code generator has deoptimised the styling of /Users/jonnycarter/code/scaffold/packages/flightjs-utilities/build/index.js as it exceeds the max of 500KB.
  
  Hash: e6d702f8e3ec3e4274d9
  
  Version: webpack 4.35.0
  
  Time: 11756ms
  
  Built at: 23/06/2019 18:23:30
  
     Asset      Size  Chunks                    Chunk Names
  
  index.js  1.82 MiB       0  [emitted]  [big]  main
  
  Entrypoint main [big] = index.js
  
  [0] external "react" 42 bytes {0} [built]
  
  [3] ../flightjs-utilities/build/index.js 1.24 MiB {0} [built]
  
   [10] external "styled-components" 42 bytes {0} [built]
  
   [12] external "react-dom" 42 bytes {0} [built]
  
   [14] (webpack)/buildin/global.js 472 bytes {0} [built]
  
  [186] (webpack)/buildin/module.js 497 bytes {0} [built]
  
  [187] /Users/jonnycarter/code/scaffold/node_modules/moment/locale sync 
  
  ^\.\/.*$ 3 KiB {0} [optional] [built]
  
  [188] ./src/index.js + 34 modules 118 KiB {0} [built]
  </code></pre>
  
  <p>`</p>
  
  <pre><code>  | ./src/index.js 619 bytes [built]
    | ./src/hooks/useAuth.js 205 bytes [built]
    | ./src/hooks/usePermission.js 268 bytes [built]
    | ./src/hooks/useProfile.js 5.67 KiB [built]
    | ./src/hooks/useChangePassword.js 6.56 KiB [built]
    | ./src/hooks/usePermissionCheck.js 3.45 KiB [built]
    | ./src/hooks/useAxiosRefresh.js 4.72 KiB [built]
    | ./src/hooks/usePasswordReset.js 7.08 KiB [built]
    | ./src/hooks/useLogin.js 5.73 KiB [built]
    | ./src/hooks/useForgotPassword.js 6.01 KiB [built]
    |     + 25 hidden modules
  + 279 hidden modules
  </code></pre>
  
  <blockquote>
    <p>WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: <a href="https://webpack.js.org/configuration/mode/" rel="nofollow noreferrer">https://webpack.js.org/configuration/mode/</a></p>
    
    <p>WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    This can impact web performance.
    Assets: 
      index.js (1.82 MiB)</p>
    
    <p>WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
    Entrypoints:
      main (1.82 MiB)
          index.js</p>
    
    <p>WARNING in webpack performance recommendations: 
    You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
    For more info visit <a href="https://webpack.js.org/guides/code-splitting/" rel="nofollow noreferrer">https://webpack.js.org/guides/code-splitting/</a></p>
  </blockquote>
  
  <p>Thanks</p>