关于vue在首次加载时缓慢的解决办法，采用资源文件压缩的方式解决

子润先生

修改于 2021-06-25 10:36:19

1.2K0

修改于 2021-06-25 10:36:19

简介第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案，将资源文件压缩。

1.webpack优化 – compression-webpack-plugin 开启gzip

npm install --save-dev compression-webpack-plugin

2.找到vue.config.js，加入以下配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ]
  }
}

3.配置nginx，加入配置如下

server {
	gzip on;
	gzip_min_length 1k;
	gzip_comp_level 9;
	gzip_types text/plain application/javascript application/x-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]\.";
}