当前位置：首页 > article >正文

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

article 2025/2/12 21:26:23

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

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

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

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

du -sh dist

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

du -h dist/js/*

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

Vue 依赖库
- Vue 本身很小（Vue 2 约 20KB，Vue 3 约 10KB）
- 但如果使用 Vuex、Vue Router、Element UI、ECharts 等，体积会增加
第三方 UI 组件
- 使用 Element UI、Ant Design Vue、Vuetify 等可能会增加 几百 KB 到几 MB
- 解决方案：按需引入组件，避免全量引入
图片、字体、静态资源
- 大量 .png、.jpg 图片会显著增大 dist 体积
- 解决方案：
  - 使用 WebP 替代 .png
  - 使用 CDN 存储静态资源
  - 压缩图片（TinyPNG、imagemin-webpack-plugin）
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+），你可以：

使用 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 项目打包有问题，需要优化。

使用 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 变大！

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 代码分割，但是你可以手动优化。

路由懒加载 不要这样:import About from "@/views/About.vue" 要改成这样（import() 按需加载）：const About = () => import("@/views/About.vue");
分离第三方库 在 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% 以上！🔥