Experience-Monks/nextjs-boilerplate

[Bug] Unused files being referenced in the output code

edgardz opened this issue · 1 comments

Describe the bug

Output code is generating references for unused files.

To Reproduce

Steps to reproduce the behavior:

  1. Add a new image file into assets/images, for instance 'test.png'
  2. Make sure there is no reference whatsoever for this file in the code.
  3. Run a clean build, to simulate the server environment: rm -rf ./out && rm -rf ./.next && npm run build:static
  4. You will see several references for this file in the generated JS bundles.

Screenshots

image

Expected behaviour

Output code should only contain references for actually used files.
The build script should only spend CPU time compressing actually used files.

Environment

  System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 586.35 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 7.9.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 95.0.4638.54
    Edge: 95.0.1020.40
    Firefox: 93.0
    Safari: 15.0
  npmPackages:
    react: ^17.0.2 => 17.0.2

Additional context

A similar issue was posted here: cyrilwanner/next-optimized-images#228

Will keep an eye on this. We're exploring new options for image optimization. Will close this once @grez96's solution is in place.