是否已准备好使用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/，然后使用gulp-imagemin gulp-clean-css，gulp-concat，gulp-uglify，gulp-htmlmin，可能gulp-rename