前端优化（webpack， js， html）

作者：夏灬影

来源：SegmentFault 思否社区

---

HTTP优化

gzip压缩

资源的压缩与合并

HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。

浏览器请求url，并在request header中设置属性accept-encoding:gzip。表明浏览器支持gzip。

• 该不该用 Gzip

• 压缩 Gzip，服务端要花时间；解压 Gzip，浏览器要花时间。中间节省出来的传输时间，真的那么可观吗？建议较大文件进行gizp

• webpack4中启动gzip压缩

• npm i -D compression-webpack-plugin
  
  plugins: [
    new CompressionPlugin({
      filename: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.html$|\.css/,
      threshold: 10240, // 只处理比这个值大的资源。按字节计算
      minRatio: 0.8 //     只有压缩率比这个值小的资源才会被处理
      deleteOriginalAssets: false, //是否删除原资源
    }),
  ];
  
  

详细配置 CompressionWebpackPlugin

https://www.webpackjs.com/plugins/compression-webpack-plugin/

CDN加速

现在大部分云服务商都是提供cdn服务

简单的来说: 原服务器上数据复制到其他服务器上，用户访问时，那台服务器近访问到的就是那台服务器上的数据。

CDN加速优点是成本低，速度快。可以用CDN best的CDN进行加速，免费，可部署私有，公有CDN系统。可以实现宕机检测，自动切换ip，分线路，分组解析。也就是CDN加速的主要作用就是保证网站的正常访问，及加快网站访问速度和响应速度，防止网站因黑客攻击，DNS解析劫持故障等导致的网站服务器的宕机状况的出现。

---

图片（图标）方面

使用字体图标

推荐：Iconfont-阿里巴巴矢量图标库

雪碧图

将多个图标集成在一起

雪碧图制作起来麻烦，我还是推荐Iconfont的字体图标啦

图片使用Base64编码减少页面请求数（建议小图片）

• Base64编码图片可以在浏览器自己显示出来

• 采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入，如
  

  使用webpack处理图片成 base64

  
  

  npm install --save-dev url-loader
  // webpack.config.js
  module.exports = {
    module: {
      rules: [{
        test: /\.(png|svg|jpg|gif|jpeg|ico|woff|woff2|eot|ttf|otf)$/,
        use: [{
            loader: "url-loader", // 根据图片大小，把图片优化成base64
            options: {
              limit: 10000, //小于10000字节的图片都进行base64操作
            }
          }
        ]
      }]
    }
  };
  
  

  webpack配置 JPG、PNG、GIF和SVG图像的压缩

  
  

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          loader: "image-webpack-loader", // 先进行图片优化
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65,
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: "65-90",
              speed: 4,
            },
            gifsicle: {
              interlaced: false,
            },
            webp: {
              quality: 75,
            },
          },
        },
      ],
    },
  };
  
  
  

  html，css优化

  
  

  
  
  
    "container">