vue 处理打包后加载慢的问题

落日映苍穹つ 2022-09-09 00:13 221阅读 0赞

原因：

1、chunk-vendors文件过大

2、js没有压缩

3、服务器没有开启gzip

解决办法：

首先在build发布时候压缩js、css等资源文件

安装npm压缩组件

npm install --save-dev compression-webpack-plugin    //vue3 
    npm i compression-webpack-plugin@5.0.1    //vue 4

压缩js、css文件，在vue.config.js 中加入如下配置项：

const CompressionPlugin = require("compression-webpack-plugin")
     
    module.exports = { 
      chainWebpack: (config) => { 
        // 生产环境，开启js\css压缩
        if (process.env.NODE_ENV === 'production') { 
          config.plugin('compressionPlugin').use(new CompressionPlugin({ 
            test: /\.(js|css|less|map)$/, // 匹配文件名
            threshold: 1024, // 对超过10k的数据压缩
            minRatio: 0.8,
          }))
        }
     
      },
    }

其次在Nginx服务端开启gzip

server{ 
            gzip on;
            gzip_static on;
            gzip_min_length 1k;
            gzip_buffers 4 16k;
            gzip_comp_level 9;
            gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
    }

或者tomcat开启nginx

<Connector port="8080" protocol="org.apache.coyote.http11.Http11NioProtocol" useSendfile="false" connectionTimeout="20000" redirectPort="8443" compression="on" compressionMinSize="50" noCompressionUserAgents="gozilla,traviata" compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"/>

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

还没有评论，来说两句吧...

相关阅读

相关 cdnjs加载速度过慢的问题

https://cdnjs.cloudflare.com/替换至国内镜像https://hk-weblib.oss-cn-hongkong.aliyuncs.com/

ゞ浴缸里的玫瑰/ 2024年04月25日 20:26/ 0 赞/ 38 阅读

相关 vue项目加载慢，Nginx页面优化

> 优化的思路： > > F12调起调试模式，查看js和css加载所需时间（注意由于资源过大导致的加载过慢）， > > 下图是经过压缩后的，压缩前chunk-vendors

男娘i/ 2023年09月27日 11:47/ 0 赞/ 123 阅读

相关 electron加载本地图片-打包处理字符集问题-vue项目改electron

安装静态文件在build里面注意 npm i -g electron 注意事项正常无法安装在中国需要配置源地址 npm config set re

冷不防/ 2022年12月30日 10:50/ 0 赞/ 208 阅读

相关 vue刷新后非常慢加载慢

![!\](https://img-blog.csdnimg.cn/20201019164122299.png\pic\_center)][https_img-blog.csd

怼烎@/ 2022年12月16日 09:07/ 0 赞/ 182 阅读

相关 vue 数据加载完成后加载组件

html源码： <template> //:is里面装的是组件名称 :child="child"是指子组件需要的数据 <component :is="isComp

朱雀/ 2022年10月05日 05:45/ 0 赞/ 275 阅读

相关 vue 处理打包后加载慢的问题

原因： 1、chunk-vendors文件过大 2、js没有压缩 3、服务器没有开启gzip 解决办法：首先在build发布时候压缩js、css等资源文件安装n

落日映苍穹つ/ 2022年09月09日 00:13/ 0 赞/ 222 阅读

相关服务器加载js css速度慢的问题

经过一上午的各种测试对比发现和服务器有关服务器处理资源效率不行同样的项目放于不同的服务器结果是截然不同的速度相差10倍有时候差的服务器网速会好一会读取就快一点大

梦里梦外;/ 2022年05月26日 10:13/ 0 赞/ 111 阅读

相关 vue-router路由懒加载（解决vue项目首次加载慢）

懒加载：----------------------------------------------------？　　　　也叫延迟加载，即在需要的时候进行加载，随用随载。

系统管理员/ 2022年05月21日 04:14/ 0 赞/ 199 阅读

相关 CEF解决加载慢问题

CEF加载慢的时候，加上以下代码，通过命令行的方式: CefRefPtr<CefCommandLine> command_line; command_line

悠悠/ 2022年05月09日 04:10/ 0 赞/ 682 阅读

相关 vue-cli webpack打包后加载资源的路径问题

vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片

我就是我/ 2022年04月17日 03:37/ 0 赞/ 329 阅读