vue项目打包部署初次访问慢问题

vue项目打包部署初次访问慢问题

#####打包部署访问

package.json中打包脚本部分

"scripts": {

"dev": "vue-cli-service serve",

"staging": "vue-cli-service serve --mode staging",

"production": "vue-cli-service serve --mode production",

"build:stage": "vue-cli-service build --mode staging",

"build:prod": "vue-cli-service build --mode production",

"preview": "node build/index.js --preview",

"lint": "eslint --ext .js,.vue src"

},

npm run build:stage

打包后,dist文件大概有20MB左右,首次访问单文件就有几兆

解决方案
复制代码
打包后,dist文件20多兆 
"compression-webpack-plugin": "^1.1.11",
npm install
vue.config.js配置
// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

configureWebpack: config => {
	config.name = name
	config.resolve.alias['@'] = resolve('src')
	config.performance = {
	  hints: 'warning',
	  //入口起点的最大体积 整数类型(以字节为单位)
	  maxEntrypointSize: 50000000,
	  //生成文件的最大体积 整数类型(以字节为单位 300k)
	  maxAssetSize: 30000000,
	  //只给出 js 文件的性能提示
	  assetFilter: function(assetFilename) {
		return assetFilename.endsWith('.js')
	  }
	}
	if (process.env.NODE_ENV !== 'development') {
	  // 生产环境
	  // 编译时删除console.log
	  config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
	  //  配置productionGzip-高级的方式
	  // 配置参数详解
	  // asset: 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
	  // algorithm: 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
	  // test: 所有匹配该正则的资源都会被处理。默认值是全部资源。
	  // threshold: 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
	  // minRatio: 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
	  config.plugins.push(
		new CompressionWebpackPlugin({
		  filename: '[path].gz[query]',
		  algorithm: 'gzip',
		  test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
		  threshold: 10240,
		  minRatio: 0.8,
		  // 是否删除原文件 
		  deleteOriginalAssets: true,
		})
	  )
	} else {
	  // 开发环境
	}
  },

#####nginx配置

开启gzip

gzip on;

复制代码
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;

# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 9;

gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;

# 禁用IE6 gzip
gzip_disable "MSIE [1-6]\.";
相关推荐
quan26311 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
GIS之路2 分钟前
GDAL 读取影像元数据
前端
qb1 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
虫无涯1 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
NewChapter °1 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app