阅读 657

Vue 前端打包 chunk-vendors文件过大的问题

vue项目,前端打包后chunk-vendors文件过大,导致加载过慢。

解决方案,性能优化处理:

1.在 vue.config.js 文件中使用 webpack的compressionPlugin

2.nginx 开启gzip优化

步骤

1.在 vue.config.js 文件中使用 webpack的compressionPlugin

安装 compressionPlugin

npm i -D compression-webpack-plugin
复制代码

小贴士:

安装失败,处理方式

报错 TypeError: Cannot read property 'tapPromise' of undefined
原因:compression-webpack-plugin 版本问题
复制代码

处理方式:

先执行卸载命令

npm uninstall compression-webpack-plugin
复制代码

执行安装命令

npm i compression-webpack-plugin@5.0.1
复制代码

vue.config.js 文件中:

引入插件

const CompressionPlugin = require("compression-webpack-plugin")
复制代码

压缩配置

if (process.env.NODE_ENV === 'production') {
  config.plugin('compressionPlugin').use(
  new CompressionPlugin({
    filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)             
    algorithm: 'gzip', // 使用gzip压缩             
    test: new RegExp('\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名            
    threshold: 10240, // 对超过10k的数据压缩            
    minRatio: 0.8 // 压缩率小于0.8才会压缩
  }))
}
复制代码

2.Nginx 开启 gzip 

文件路径:

nginx安装目录 -> conf -> nginx.conf

nginx.conf文件添加如下gzip配置

 http {   
   gzip on; 
   gzip_static on;
   gzip_buffers 4 16k;
   gzip_comp_level 5;
   gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg 
	 image/gif image/png;
 }
复制代码

修改完nginx.conf文件配置,通过 nginx -s reload 命令重启服务

文章分类
前端
文章标签