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

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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，加入配置如下

代码语言：javascript复制

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].";
}

vue项目打包：npm run build。 重启nginx：进入nginx可执行目录sbin下，输入以下命令即可。

代码语言：javascript复制

./nginx -s reload

nginx 打包 webpack vue.js javascript

0 人点赞