vue打包优化dist

好好学习 ，天天向上。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 //是否删除源文件
      })
    ]
  }
}

设置之后 npm run build
等等~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

不要慌~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这是compression-webpack-plugin版本导致的 npm i 下载的是最新版本，咱们可以给他在package.json改成

"compression-webpack-plugin": "1.1.12",

直接copy 然后再npm i
ok ok ok !
npm run build

过大文件已压缩，完成任务，提升速度！！！