是否有现成的解决方案使用 grunt orgulp 或 webpack 来优化 html、css、js、图像资源以提高页面速度？

Question

我写了一个静态网站，想用 github-pages 来托管它。

源码已经准备好，涉及html页面，css文件，js文件，图片...我已经在html页面链接了资源

但问题是页面加载速度比较慢，加载上述所有资源需要很多时间。

所以我想优化我页面中的资源。我知道有一小部分 npm 模块为不同的资源做不同的工作。但是我花了很多时间来浏览这些模块的所有文档并自己设置一个构建作业。

所以我想知道是否已经有一些可以立即采用的现成的解决方案，我的要求很简单：

1. 缩小图像，并将图像转换为base64并输入到html页面

2. 压缩js，并把它们拼接在一起

3. 缩小 css，并连接它们

4. 缩小 html

Answer 1

每个项目都有自己的要求、自己的文件夹结构等，因此您需要为您的设置定制一些东西。但是，一旦您知道如何设置，这很容易设置。例如，经过一些研究，您将能够使用 Gulp 来做到这一点。阅读https://css-tricks.com/gulp-for-beginners/, then use gulp-imagemin gulp-clean-css, gulp-concat, gulp-uglify, gulp-htmlmin, and probably gulp-rename