React/Vue性能优化之webpack操作（浏览器加载gzip压缩包）

名字还没想好☜

已于 2022-06-13 11:01:22 修改

阅读量947

点赞数 1

文章标签： webpack vue.js react.js 前端 javascript

于 2022-01-17 20:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_42662753/article/details/122538615

版权

前言

在项目发布之后，小编遇到一个问题，在浏览器首次今入系统时，需要加载的资源高达十几兆，加载时间需要一分钟左右，这给用户的体验是非常差的，在本地开发时没有这个问题。因此才意识到之前没有对项目做任何的优化，从而通过webpack对项目进行tree shaking、分包拆包、HTTP压缩。

一、资源懒加载

首先是理由的懒加载，在这里首次今入页面时不会加载具体的页面的资源，在这个操作之后，main.js和main.css资源从十几兆减少到了一半。
懒加载之后，首次需要加载的会被放到main.js下，而懒加载的js会被分成若干个chunk文件。

具体配置如下，一般新建项目时会默认配置好，无需手动配置
在这里插入图片描述
打包之后文件：

二.HTTP压缩（优化最明显）

HTTP压缩是一种内置在服务器和客户端之间的，以改进传输速度和带宽利用率的方式，简单来说就是将资源压缩成压缩包，浏览器加载资源时加载的是压缩包，减少加载时间。

使用CompressionPlugin将资源压缩成gzip包

//安装CompressionPlugin
yarn add  compression-webpack-plugin -s

//资源配置
const CompresssionPlugin = require('compression-webpack-plugin')  //引入compression-webpack-plugin

 //Http压缩
 new CompresssionPlugin({
   test: /\.(css|js)$/,    //匹配文件
   // threshold: 500,    //设置文件从多发开始压缩
   minRatio: 0.7,    //至少的压缩比例
   algorithm: 'gzip',//采用的压缩算法
 }),

使用之后结果对比

使用Http压缩前：在这里插入图片描述
使用Http压缩后：

总结：压缩前后将资源包将了很多，css和js的资源加载时间更快，build之后的包如下图：

到这里，Http压缩算是完成了，不过要让发布到线上让浏览器加载gzip包，还需要通过nginx进行配置，配置如下：

  http {
  # 开启gzip
  gzip on;

  # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;

  # gzip 压缩级别 1-10 
  gzip_comp_level 2;

  # 进行压缩的文件类型。

  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
}

三.Tree shaking

imagine that you made cakes by throwing whole eggs into the mixing bowl and smashing them up, instead of cracking them open and pouring the contents out. Once the cake comes out of the oven, you remove the fragments of eggshell, except that’s quite tricky so most of the eggshell gets left in there.

这里官方提供的概率，简单概述就是将无用的代码、多余的代码、死代码将其删除，减少资源包。

使用 usedExports
使用sideEffects
CSS实现Tree Shaking
通过PurgeCss的webpack插件

//安装purgecss-webpack-plugin插件
yarn add  purgecss-webpack-plugin -s

//配置PurgeCss

const PurgeCssPligin = require("purgecss-webpack-plugin"); //引入purgecss-webpack-plugin

 new PurgeCssPligin({
     paths: glob.sync(`${path.resolve(__dirname, '../src')}/**/*`, { nodir: true }),
      safelistL: function () {
        return {
          standard: ["body", 'html']
        }
      }
 }),