javascript - 如何在我的网站上启用压缩？

Question

我要

我的页面加载速度更快或至少加载最佳。

我已经连接并缩小我所有的JS、CSS，甚至HTML 。我还在 Mac 上使用 Photoshop 和 ImageOptim 优化了我的大部分图像。现在，我想在我的网站上启用/配置压缩。

---

我是新来的

压缩的世界:gzip/deflate，我正在努力学习它们。

---

我试过了

在 Grunt 中设置它。

我已经安装了npm install grunt-contrib-compress --save-dev

然后，我把它配置成这样

compress: {

    main: {

        options: { mode: 'gzip' },

        expand: true,
        cwd: 'img/',
        src: ['**/*'],
        dest: 'dist/img'
    }
}

---

测试

当我运行 grunt 时，我压缩了我的 img/ 文件夹中的所有内容，并按预期存储在我的 dist/img/ 中。

Created dist/img/overlays/01.png (214 bytes)
Created dist/img/overlays/02.png (212 bytes)
Created dist/img/overlays/03.png (209 bytes)
Created dist/img/overlays/04.png (211 bytes)
Created dist/img/overlays/05.png (212 bytes)
Created dist/img/overlays/06.png (211 bytes)
Created dist/img/overlays/07.png (217 bytes)
Created dist/img/overlays/08.png (159 bytes)

---

比较

然后，我转到文件夹 dist/img/ 并检查文件大小是否不同。它们并没有那么大的不同。示例，58 kb 与 59 kb

---

问题

现在，我只压缩图像。我是否需要压缩我的 minify Assets ，例如:JS、CSS、HTML？在我们的网站上启用压缩的最有效方法是什么？

请随时向我提出任何建议。

Answer 1

您还可以通过添加 report 选项来压缩缩小的 JS/CSS:

cssmin: {
    dist: {
       options: {
         report: 'gzip'
     },
     files: [{...

uglify: {
    options: {
        mangle: true,
        report: 'gzip'
    },

使用grunt-uncss从您的元素中删除未使用的 CSS。

如果您使用的是指南针，请尝试 Spriting您的图像，而不仅仅是压缩它们。