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

落日映苍穹つ 2022-09-09 00:13 273阅读 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 条评论，273人围观）

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

相关阅读

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

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

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

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

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

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

相关 vue 首屏加载慢的问题

[https://www.cnblogs.com/myfirstboke/p/11321191.html][https_www.cnblogs.com_myfirstboke

你的名字/ 2023年02月27日 03:24/ 0 赞/ 4 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 CEF解决加载慢问题

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

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

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

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

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