Performance issues `npm run dev` hot-reloading

mhrisse commented 4 years ago

Hi!

First of all, this is a great library which solved my problem ellegantly.

However, using the latest packages with NextJS, I have severe performance issues when having a couple of images required to be resized from 1024px on the longest edge to lower resolution images (simple jpg to jpg).

Steps to reproduce

Have a couple of requires images (like for a <picture> element)
Save any file, like a js file in /components/ directory
The library seems to re-generate all images and this freezes the browser?
It seems to me the watcher might be or the watcher is also parsing files it is not supposed to, like the favicon.ico files (which throws errors)
It takes 10 seconds, rendering hot-reloading and dev mode pretty much useless.

Please let me know if you need more information. Happy to chip in if you give me some pointers.

kwyoung11 commented 4 years ago

+1. I am seeing this issue too. It seems to be trying to parse every file in the public/ directory. For e.g., here is the output I am getting using next dev after a hot reload:

[ warn ]  ./public/prism/prism-line-numbers.css?webp
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

./public/prism/prism-line-numbers.css?trace
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

./public/prism/prism.css?webp
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

./public/prism/prism.css?trace
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global

./public/zeit.svg?trace
Error: Could not find MIME for Buffer <null>

./public/prism/prism-line-numbers.css?webp
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String

./public/prism/prism-line-numbers.css?trace
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String

./public/prism/prism.css?webp
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String

./public/prism/prism.css?trace
Module build failed: Error: Final loader (./node_modules/next/dist/build/webpack/loaders/error-loader.js) didn't return a Buffer or String

./public/config.yml?webp 4:14
Module parse failed: The keyword 'public' is reserved (4:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   name: git-gateway
|   branch: master
> media_folder: public/img
| public_folder: /img

./public/config.yml?trace 4:14
Module parse failed: The keyword 'public' is reserved (4:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   name: git-gateway
|   branch: master
> media_folder: public/img
| public_folder: /img

./public/local_config.yml?webp 4:14
Module parse failed: The keyword 'public' is reserved (4:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   name: git-gateway
|   branch: master
> media_folder: public/img
| public_folder: /img

./public/local_config.yml?trace 4:14
Module parse failed: The keyword 'public' is reserved (4:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   name: git-gateway
|   branch: master
> media_folder: public/img
| public_folder: /img

./public/favicon.ico?webp 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

./public/favicon.ico?trace 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

./public/sitemap.xml?webp 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8"?>
|     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
|         <url>

./public/sitemap.xml?trace 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" encoding="UTF-8"?>
|     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
|         <url>
[ info ]  ready on http://localhost:3000

Also seeing this stacktrace:

(node:60195) UnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at /Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/compiled/webpack-hot-middleware/middleware.js:1:2080
    at /Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/compiled/webpack-hot-middleware/middleware.js:1:1399
    at Array.forEach (<anonymous>)
    at everyClient (/Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/compiled/webpack-hot-middleware/middleware.js:1:1379)
    at Object.publish (/Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/compiled/webpack-hot-middleware/middleware.js:1:2034)
    at Function.o.publish (/Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/compiled/webpack-hot-middleware/middleware.js:1:1216)
    at HotReloader.send.args [as send] (/Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/server/hot-reloader.js:5:678)
    at /Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/server/hot-reloader.js:15:508
    at typePromise.then.typeMessages (/Users/kevinyoung/2019/personal_work/kyoungcodes/node_modules/next/dist/build/output/index.js:5:651)
(node:60195) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 9)

kwyoung11 commented 4 years ago

I moved my images to a folder that contains just images, as in the example, and looks like it's resolved.

cyrilwanner / next-optimized-images

Performance issues `npm run dev` hot-reloading #130

Steps to reproduce