Vue 打包 chunk-vendors.js 文件过大导致页面加载慢

最新推荐文章于 2026-04-29 10:02:45 发布

原创

最新推荐文章于 2026-04-29 10:02:45 发布 · 1.2k 阅读

标签

#vue.js #前端

收录于

博客主要讲述了Vue项目部署后在移动端打开加载缓慢的问题，通过F12发现是chunk - vendors.js加载时间过长。并给出了解决方案，即利用插件，包含下载和修改等步骤。

问题描述

项目部署后移动打开加载缓慢，F12发现chunk-vendors.js加载时间过长。
百度参考材料

解决方案：

利用compression-webpack-plugin插件

第一步
下载compression-webpack-plugin

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

或者

yarn add compression-webpack-plugin --save-dev

第二步
修改vue.config.js

const {
   
    defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
const CompressionPlugin = require('compression-webpack-plugin')
const zlib = require('zlib')
const path = require('path')
const Timestamp = new Date().getTime();

// 至此，你会发现原先的vender文件没有了，同时多了好几个依赖的js文件  
module.exports = defineConfig({
   
   
  produc