前端vue项目性能优化打包压缩、去掉亢余文件

🚀作者简介

主页：水香木鱼的博客

专栏：项目优化

能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

（一）打包压缩

介绍：compression-webpack-plugin插件通过压缩算法，将前端打包好的资源文件进一步压缩，生成指定的、体积更小的压缩文件，让浏览器能够更快的加载资源。

Ⅰ、安装命令

注意：版本要求在@6以下

npm install --save-dev compression-webpack-plugin@5.0.2

Ⅱ、前端 vue.config.js 配置

const CompressionWebpackPlugin = require("compression-webpack-plugin"); //引入打包压缩插件
const productionGzipExtensions = ["js", "css"]; //压缩js 和css文件
module.exports = {
  configureWebpack: {
    plugins: [
      // 配置压缩
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]", //压缩后的文件名
        algorithm: "gzip", //使用gzip压缩
        test: productionGzipExtensions, //压缩文件格式
        threshold: 10240, //只有大小于该值的资源会被处理 单位是bytes 默认是0
        minRatio: 0.8, //压缩率小于1才会压缩
        deleteOriginalAssets: true, //是否删除原资源
      }),
    ],
  },
};

Ⅲ、服务端 nginx.conf 配置

在 http 模块内配置如下👇

http{
   gzip on;
   gzip_static on;
   gzip_min_length 1k;
   gzip_buffers 4 32k;
   gzip_http_version 1.1;
   gzip_comp_level 2;
   gzip_types text/plain application/x-javascript text/css application/xml;
   gzip_vary on;
   gzip_disable "MSIE [1-6].";
}

重启 nginx

systemctl restart nginx

（二）去除亢余文件

介绍：useless-files-webpack-plugin 插件通过过滤算法，在打包时去除项目当中产生的亢余文件，从而减轻包体积

Ⅰ、安装命令

npm i useless-files-webpack-plugin -S

Ⅱ、vue.config.js 配置

const UselessFile = require("useless-files-webpack-plugin"); //去除亢余文件
module.exports = {
  configureWebpack: {
    plugins: [
      //去除亢余文件
      new UselessFile({
        root: "./src", // 项目目录
        out: "./fileList.json", // 输出文件列表
        // out: (files) => deal(files), // 或者回调处理
        clean: false, // 删除文件,
        exclude: path, // 排除文件列表, 格式为文件路径数组
      }),
    ],
  },
};

Ⅲ、unused-files.json 文件是什么？

打包时会在项目的根目录下生成unused-files.json文件, 保存着没有用的文件列表。

注意：根据列表中的提供路径，核对相应文件是否需要保留。无需保留，手动删除即可。

如何清理无用的文件？【谨慎操作，按照操作步骤进行操作！！！】

当我们更新迭代后，可能第一版本的页面已经无用了，我们如何快速清理呢？

1. 在vue.config.js配置文件内把 clean: false 属性更改为true
2. 重新启动项目：npm run dev/serve 或者 npm run build 即可自动清除冗余文件。
3. 最后一步很关键，记得把 clean: true 更改为false，再次执行第二步

福利：若依快速构建 web 应用程序

拓展阅读：compression-webpack-plugin 实践

📓精品推荐

🔋前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】

🔋vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】

🔋vue实现【接口数据渲染随机显示】和【仅显示前五条数据】

🔋vue实现随机验证码(数字类型、字母类型)业务【适用于登录页、网页安全码】

🔋vue实现刷新页面随机切换背景图【适用于登陆界面】

木鱼谢语：感谢各位技术大牛们的点赞👍收藏🌟，每一期都会为大家带来快速适用于业务的文章，让大家做到cv即可。

这篇好文章是转载于：学新通技术网