search

jonkemp / gulp-useref

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
MIT License
705 stars 93 forks source link

How optimize multiple HTMLs that use the same files and slow down gulp? #230

Closed lpotapczuk closed 7 years ago

lpotapczuk commented 7 years ago

Hi!!

I have setup, in which I have around 30 html files. All off them in the result use the same css and js files. Here is example of how each html file is ending:

<!-- Non-module JS libs -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../node_modules/moment/min/moment-with-locales.min.js"></script>
<script src="../node_modules/lodash/lodash.min.js"></script>
<script src="/assets/vendor/jquery.elevateZoom-3.0.8.min.js"></script>
<script src="/assets/vendor/jquery/attrchange.js"></script>
<script src="/assets/vendor/lightbox.js"></script>

<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="/assets/vendor/classList.min.js"></script>

<!-- Load libraries -->
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="/assets/js/file1.js"></script>
<script src="/assets/js/file2.js"></script>
<script src="/assets/js/file3.js"></script>
<script src="/assets/js/file4.js"></script>
<script src="/assets/js/file5.js"></script>

Apart from that, I also inject css file:

<!-- build:css assets/bundle.css -->
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/vendor/animate.min.css">
<!-- app:css -->
<link rel="stylesheet" href="assets/styles/main.css">
<!-- endinject -->
<!-- endbuild -->

Now, it works great for development! However, when I am building the production version, it takes around 15 minutes to go over all files, and build 3 files (utilities.js, lib.js and bundle.css).

How can I improve this setup, so that the building the production version is faster?

jonkemp commented 7 years ago

Maybe one of these examples will help.

https://github.com/gulpjs/gulp/blob/master/docs/recipes/incremental-builds-with-concatenate.md https://github.com/gulpjs/gulp/blob/master/docs/recipes/only-pass-through-changed-files.md

gulp-changed only passes through changed files.

gulp-cached is an in-memory file cache for gulp.

gulp-remember remembers files that have passed through it. It pairs nicely with gulp-cached when you want to only rebuild the files that changed, but still need to operate on all files in the set.

mix3d commented 7 years ago

I think this speaks to a concern I've been having as well:

Does the useref rebuild the combined JS file for every instance found in each html file? Or is there some intelligence to know X files turned into Y.js, so reuse Y.js if the same Y.js file is requested in a separate HTML file, with the same input files?

jonkemp commented 7 years ago

@mix3d yes it does rebuild the same files everytime. You would have to use something like in the examples I linked above.