vue打包优化dist

最新推荐文章于 2025-05-22 08:50:02 发布

LennieGao

最新推荐文章于 2025-05-22 08:50:02 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_43654258/article/details/111309056

vue 专栏收录该内容

6 篇文章

订阅专栏

博客介绍了VUE打包后文件太大的解决方法。首先推荐使用文件可视化插件找出过大文件，可在vue.config.js中设置并执行npm run build生成可视化图片，之后进行路由懒加载、图片压缩、cdn引入等优化。若dist文件仍大，可使用gzip压缩，还给出了相关插件设置及版本处理办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好好学习，天天向上。Are you ready?

VUE打包后文件太大解决方法

首先了解是哪个文件过大，这里推荐文件可视化插件

npm install webpack-bundle-analyzer -S -D

在这里插入图片描述
在vue.config.js中设置

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }
}

设置后执行npm run build 就会生成文件可视化图片，然后去查阅
找到对应的文件去优化，建议路由懒加载，图片压缩，cdn引入

一一解决后dist文件还大怎么办，使用gzip，gzip压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

方法奉上

使用插件

npm install compression-webpack-plugin -D

在vue.config.js中设置

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //是否删除源文件
      })
    ]
  }
}