Vue Cli 项目白屏时间长，如何优化？？？

昨夜太平长安888

已于 2023-05-08 11:46:58 修改

阅读量329

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-05-08 11:41:35 首次发布

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/130554904

文章介绍了如何在VueCLI3项目中进行打包优化，包括关闭预加载以减少首次打开时的白屏时间，以及通过引入gzip和brotli压缩来减小文件大小，提高加载速度。在vue.config.js中删除预加载插件，并配置compression-webpack-plugin来实现压缩，特别指定了压缩算法和阈值。

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

vue cli3项目如果打包优化？

下面的这些配置是在vue.config.js文件中去配置，如果没有新建一个

下面的这些配置是在vue.config.js文件中去配置，如果没有新建一个

vue cli 3 是默认开始预加载的，如果我们项目首次打开白屏时间或等待过长我们可以关闭预加载

  chainWebpack: (config) => {
    config.plugins.delete("preload");
    config.plugins.delete("prefetch");
  },

引入gzip、brotli压缩

npm i compression-webpack-plugin -D

如果报错的话，可能是版本过高，我们可以指定版本安装

npm i compression-webpack-plugin@6.1.0 -D

安装完成之后在vue.config.js中进行配置：

  const CompressionPlugin = require("compression-webpack-plugin");
  configureWebpack: () => {
    if (process.env.NODE_ENV === "production") {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: "gzip",  
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8,
          }),
          new CompressionPlugin({
            algorithm: "brotliCompress",
            test: /\.(js|css|html|svg)$/,
            compressionOptions: {
              level: 11,
            },
            threshold: 10240,
            minRatio: 0.8,
          }),
        ],
      };
    }
  },