search

bholloway / resolve-url-loader

Webpack loader that resolves relative paths in url() statements based on the original source file
563 stars 71 forks source link

Performance is not acceptable #29

Closed mocheng closed 8 years ago

mocheng commented 8 years ago

In my project, originally it takes ~3 seconds to do webpack build. After adding resolve-url-loader, it takes ~12 seconds to do build. This make horrible dev experience. 

    "resolve-url-loader": "^1.4.3",
cevou commented 8 years ago

As a developer would you be able to resolve an issue with such a description? If you want your issue to be resolved you need to add more information on how you are using it, how many files you are processing, etc. It would be even better if you would upload an example project where this issue could be reproduced.

mocheng commented 8 years ago

@cevou Sorry for the too brief description. I thought it would be a common issue.

The project is a private project that is not appropriate to be published. I did some investigation. Seems that resolve-url-loader works on source map. So I have to turn on source map in webpack to make it work. There are hundreds of source files in the project. It must be the generation of source map makes the build slow.

For the time being, I falls back to use webpack resolve.alias to handle resolution of url() in CSS/SCSS.

bholloway commented 8 years ago

Some thoughts...

Give source-maps a try

Many people use source-maps. You will find your code much more difficult to debug if you do not use them.

Personally I use Webstorm and can set breakpoints right in my original source files. I also minify code all the time so I never get production-shock - But that is too extreme for most people.

Use incremental compile Split your SASS compile

Your focus on initial compile time leads me to think that you are using webpack within gulp, or some other build chain that cannot run an incremental compile (i.e. watch).

Normally you would experience the initial compile a couple of times a day. Mine are usually ~90seconds. If you use babel you can use babelCache to bring that down further. But the incremental time should be < 10 seconds.

If you are talking about your incremental compile time then I think something may be wrong. Maybe you have a single SASS file for your whole project, which you obviously can't compile incrementally.

Ensure you have a SSD Check you aren't searching your whole HDD

Also, since resolve-url-loader performs file-system operations, it will perform slower without a Solid State HDD. Webpack in general will perform very poorly in this situation. This probably isn't your use-case but I mention it anyway.

There is also the possibility that it cannot immediately find the files it is looking for and is exhaustively searching your project directory. We should really add a debug option so that it is possible to eliminate this possibility. For now, run a test where the old difference is resolve-url-loader (i.e. with source-maps in both cases) and confirm the difference is small.

Organise by feature and don't use resolve-url-loader

Webpack allows you to import CSS within the feature that you are using it. Many people consider it best practice to co-locate your js, s?css, and assets all within a feature folder.

In that case you do not need resolve-url-loader because you are only referencing assets immediately adjacent to your s?css files.

And as I said above, many SASS files will compile incrementally, whereas a single SASS file will not.