如何实现CompressionWebpackPlugin vue 项目node_modules太大了占磁盘的具体操作步骤

原创

mob649e8159b30b 2023-07-07 07:35:14 ©著作权

文章标签 Vue 加载 bash 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8159b30b的原创作品，请联系作者获取转载授权，否则将追究法律责任

压缩 vue 项目中的 node_modules 文件夹

简介

在开发 Vue 项目时，node_modules 文件夹通常会非常庞大，占用了大量磁盘空间。为了解决这个问题，我们可以使用 CompressionWebpackPlugin 插件来对这个文件夹进行压缩，从而减小项目的体积，加快加载速度。

所需工具和依赖

在开始之前，我们需要确保以下工具和依赖已经安装：

Vue CLI：用于创建和管理 Vue 项目。
CompressionWebpackPlugin 插件：用于压缩文件。

实现步骤

下面是实现压缩 node_modules 文件夹的步骤：

步骤	操作
1.	安装 CompressionWebpackPlugin 插件
2.	在项目的 vue.config.js 文件中配置插件
3.	运行项目并验证压缩效果

1. 安装 CompressionWebpackPlugin 插件

首先，我们需要在项目中安装 CompressionWebpackPlugin 插件。打开终端，进入项目的根目录，然后执行以下命令：

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

2. 配置插件

接下来，我们需要在项目的 vue.config.js 文件中进行插件的配置。如果该文件不存在，可以在项目根目录下创建一个。

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
};

让我们来逐行解释上述代码的含义：

const CompressionWebpackPlugin = require('compression-webpack-plugin');：引入 CompressionWebpackPlugin 插件。
module.exports = {：导出一个对象，包含了配置信息。
configureWebpack: {：在 Vue CLI 中配置 webpack 相关的配置。
plugins: [ ... ]：在 webpack 的配置中，设置需要使用的插件。
new CompressionWebpackPlugin({ ... })：创建一个 CompressionWebpackPlugin 的实例，并传入配置。

在 CompressionWebpackPlugin 的配置中，我们可以指定以下参数：