前端打包后的dist文件太大怎么办？如何优化处理？

news/2025/2/12 14:26:57/

Vue 项目打包后 dist 目录的大小取决于多个因素，例如项目的复杂度、使用的依赖库、图片资源、是否做了代码拆分和压缩等。通常来说：

1. 一般情况下的 dist 目录大小

2. 如何检查 dist 文件大小？

你可以使用 du -sh 命令快速查看 dist 目录大小：

du -sh dist

或者查看具体的 JS 文件大小

du -h dist/js/*

3. 影响 dist 目录大小的因素

  1. Vue 依赖库

    • Vue 本身很小（Vue 2 约 20KB，Vue 3 约 10KB）
    • 但如果使用 Vuex、Vue Router、Element UI、ECharts 等，体积会增加

  2. 第三方 UI 组件

    • 使用 Element UI、Ant Design Vue、Vuetify 等可能会增加 几百 KB 到几 MB
    • 解决方案：按需引入组件，避免全量引入

  3. 图片、字体、静态资源

    • 大量 .png、.jpg 图片会显著增大 dist 体积
    • 解决方案：
      • 使用 WebP 替代 .png
      • 使用 CDN 存储静态资源
      • 压缩图片（TinyPNG、imagemin-webpack-plugin）

  4.  4. JS 代码未压缩

    • Vue CLI 默认会使用 TerserPlugin 进行 JS 代码压缩
    • 如果没有压缩，JS 体积会大几倍
    • 解决方案：
      • 确保 .env.production 中包含：NODE_ENV=production
      • 在 vue.config.js 里开启代码压缩：module.exports = {
          configureWebpack: {
            optimization: {
              minimize: true
            }
          }
        }
         

5.未使用代码拆分     

  • 如果不使用 Webpack 代码分割，所有 JS 会打包进 app.js，导致 dist/js/ 里的单个 JS 文件过大
  • 解决方案：
    • 确保 Webpack 开启代码拆分：module.exports = {
        configureWebpack: {
          optimization: {
            splitChunks: {
              chunks: "all"
            }
          }
        }
      };

                   

4. 如何优化 dist 目录大小？

 示例：在 vue.config.js 里使用 CDN 加速：

module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios"
    }
  }
};
 

 然后在 index.html 里用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
 

 

你当前 dist 目录的大小是多少？

可以执行以下命令：

du -sh dist
 

如下图，就会获得目录文件的具体大小 

 如果根据文件大小进行对应的优化

1. 先分析 dist 里是什么文件占用了空间

查看 dist 目录结构

在终端运行：

du -h dist/* | sort -h
 

或者查看 js/ 目录：

 du -h dist/js/* | sort -h

你会看到哪些文件最占空间，比如：

90M dist/assets/
30M dist/js/
5M dist/css/ 

 可能的原因：

 

2. 解决方案：

✅ 1. 图片和静态资源优化

如果 dist/assets/ 里图片太大（50MB+），你可以：

  1. 使用 WebP 替代 PNG/JPG

    • imagemin-webpack-plugin 自动压缩： 
      npm install imagemin-webpack-plugin --save-dev

        在 vue.config.js 里配置：

 const ImageminPlugin = require("imagemin-webpack-plugin").default;
module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        pngquant: { quality: "65-80" },
        jpegtran: { progressive: true }
      })
    ]
  }
};

手动压缩：

  • TinyPNG：在线压缩 PNG/JPG
  • Squoosh：支持 WebP
  • imagemin（自动压缩）

使用 CDN 托管图片

  • 把 public/assets/ 里的大图片放到 CDN
  • 然后用网络链接替代本地路径： 
    <img src="https://cdn.example.com/images/logo.webp" />

 

✅ 2. JS 体积优化

如果 dist/js/ 里的 app.js 或 vendor.js 超过 5MB，说明 Vue 项目打包有问题，需要优化。

  1. 使用 webpack-bundle-analyzer 查看占用情况

        npm install webpack-bundle-analyzer --save-dev

 在 vue.config.js 里启用分析：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
    plugins: [new BundleAnalyzerPlugin()]
  }
};
 

然后运行：

npm run build 

 你会看到 哪些依赖最占用空间，然后可以进行优化。

2.开启 Tree Shaking 在 vue.config.js 里启用 Tree Shaking（去掉未使用的代码）：

module.exports = {
  configureWebpack: {
    optimization: {
      usedExports: true,
      minimize: true
    }
  }
};
 

 3.按需加载 UI 组件 如果你用的是 Element UI / Ant Design Vue / Vuetify，不要全量引入，而是按需加载：

import { Button, Table } from "element-ui";
Vue.use(Button);
Vue.use(Table);

如果全局引入了 import ElementUI from "element-ui"; Vue.use(ElementUI);，会导致 dist 变大！ 

4.

CDN 加速 把 Vue、Vue Router、Axios 等放到 CDN，而不是打包进 dist 

修改 vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios"
    }
  }
};
 

然后在 public/index.html 里加上 CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script> 

 

✅3. 代码分割

Vue CLI 默认启用了 Webpack 代码分割，但是你可以手动优化。

  1. 路由懒加载 不要这样:import About from "@/views/About.vue"   要改成这样（import() 按需加载）：const About = () => import("@/views/About.vue");

  2. 分离第三方库 在 vue.config.js 里开启 splitChunks：   module.exports = {
      configureWebpack: {
        optimization: {
          splitChunks: {
            chunks: "all",
            minSize: 10000,
            maxSize: 250000
          }
        }
      }
    };

4. 开启 Gzip 压缩 

如果你用的是 Nginx，可以直接开启 gzip：

gzip on;
gzip_types text/plain application/javascript text/css;
gzip_min_length 1000;

或者用 compression-webpack-plugin 在 Webpack 里压缩

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

修改 vue.config.js：

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css|html)$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
};
 

这样 dist 目录的体积可以缩小 50% 以上！🔥 

总结

你的 Vue dist 目录 125MB 是 严重异常 的，一般 Vue 项目 应在 500KB - 10MB 之间。你可以：

  1. 检查 dist/ 哪些文件占用空间
  2. 压缩图片、使用 WebP，存 CDN
  3. 按需加载 UI 组件
  4. 开启 Webpack 代码拆分
  5. 使用 Gzip 压缩
  6. 使用 CDN 加速 Vue 相关库
  7. 使用 webpack-bundle-analyzer 找出大文件


http://www.ppmy.cn/news/1571439.html

相关文章

【DeepSeek】DeepSeek概述 | 本地部署deepseek

【DeepSeek】DeepSeek概述 | 本地部署deepseek

目录 1 -> 概述 1.1 -> 技术特点 1.2 -> 模型发布 1.3 -> 应用领域 1.4 -> 优势与影响 2 -> 本地部署 2.1 -> 安装ollama 2.2 -> 部署deepseek-r1模型 1 -> 概述 DeepSeek是由中国的深度求索公司开发的一系列人工智能模型&#xff0c;以其…
阅读更多...
蓝桥杯51单片机练习（国信长天比赛用）

蓝桥杯51单片机练习（国信长天比赛用）

文章目录 代码实现头文件固定模板延时函数HC138译码器和或非门流水灯闪烁次数(假设闪烁5次)从左向右依次亮从左向右依次灭 总代码 代码实现 头文件 #include <REGX52.H> 固定模板 void main() { while(1) { } } 延时函数 void Delay(unsigned char t) { while(t–…
阅读更多...
【AI知识点】苦涩的教训 The Bitter Lesson by Rich Sutton(2019)

【AI知识点】苦涩的教训 The Bitter Lesson by Rich Sutton(2019)

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】【AI应用】 “The Bitter Lesson” 是由 Richard Sutton&#xff08;强化学习领域的先驱之一&#xff09;提出的一个概念&#xff0c;指的是机器学习领域在长期发展过程中&#xff0c;尤其是在强…
阅读更多...
对React中类组件和函数组件的理解？

对React中类组件和函数组件的理解？

React 中的 类组件 和 函数组件 是两种不同的组件定义方式&#xff0c;它们都可以用来创建 UI&#xff0c;但在语法、特性和使用场景上有一些区别。以下是它们的详细对比和理解&#xff1a; 1. 类组件&#xff08;Class Components&#xff09; 特点 基于 ES6 的类&#xff1a…
阅读更多...
Oracle认证大师（OCM）学习计划书

Oracle认证大师（OCM）学习计划书

Oracle认证大师&#xff08;OCM&#xff09;学习计划书 一、学习目标 Oracle Certified Master&#xff08;OCM&#xff09;是Oracle官方认证体系中的最高级别认证&#xff0c;要求考生具备扎实的数据库管理技能、丰富的实战经验以及解决复杂问题的能力。本计划旨在通过系统化的…
阅读更多...
Ubuntu 安装 NVIDIA 驱动实操指南（含卸载）

Ubuntu 安装 NVIDIA 驱动实操指南（含卸载）

本文将详细介绍如何在Ubuntu上安装和配置NVIDIA显卡驱动。以下是一步步的操作流程&#xff0c;包括禁用开源驱动的步骤。 步骤 1&#xff1a;安装依赖 首先&#xff0c;确保系统中已安装gcc和make&#xff0c;这些是编译驱动所需的依赖。 sudo apt update sudo apt install …
阅读更多...
Python 面向对象（类，对象，方法，属性，魔术方法）

Python 面向对象（类，对象，方法，属性，魔术方法）

前言&#xff1a;在讲面向对象之前&#xff0c;我们先将面向过程和面向对象进行一个简单的分析比较&#xff0c;这样我们可以更好的理解与区分&#xff0c;然后我们在详细的讲解面向对象的优势。 面向过程&#xff08;Procedure-Oriented Programming&#xff0c;POP&#xff0…
阅读更多...
利用deepseek参与软件测试 基本架构如何 又该在什么环节接入deepseek

利用deepseek参与软件测试 基本架构如何 又该在什么环节接入deepseek

利用DeepSeek参与软件测试&#xff0c;可以考虑以下基本架构和接入环节&#xff1a; ### 基本架构 - **数据层** - **测试数据存储**&#xff1a;用于存放各种测试数据&#xff0c;包括正常输入数据、边界值数据、异常数据等&#xff0c;这些数据可以作为DeepSeek的输入&…
阅读更多...
最新文章

Copyright @ 2022~2023