vue首屏优化压缩打包

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

作为一个后端人员，偶尔也会接触一下前端的技术，比如打包部署等等。

目前有一个小项目，服务器的带宽只有1M，导致的的问题是页面首屏加载特别慢，打开控制台发现，很多静态文件，js、css等等加载完成都需要5到10秒，这对于用户来说是不能容忍的。

遇到问题我们就要解决问题，我所熟知的方法就是在vue打包的时候进行压缩，然后在nginx部署时增加相应的配置即可。

下面我来具体描述下操作过程。

打包

安装依赖

先安装如下的压缩打包依赖：

cnpm install --save compression-webpack-plugin

或者自己选择需要的版本。

vue项目添加配置

在vue.conf.js当中，增加如下的配置：

chainWebpack: config => {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  if (process.env.NODE_ENV === 'production') {
    config.plugin('CompressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /.(js|css)$/,
          threshold: 10240, // 超过10kb的文件就压缩
          deleteOriginalAssets:true, // 不删除源文件
          minRatio: 0.8
        })
    )
  }
}

打包

直接执行打包命令：

npm run build

打包后的文件如下所示：

js文件：

css文件：

相比于未压缩之前，已经小了很多。

部署

目前我用到的项目都是使用nginx来部署的，总体来说轻量快捷，端口占用少，且修改、替换文件相当容易。

使用压缩后的打包文件dist，需要对nginx做一些额外的配置才能生效，如下所示：

gzip_static on;

将上面所示的文件放到你的nginx配置的server当中即可。

reload 或者 restart nginx就完成部署啦。

我们来看下时间，已经很不错了，比之前提升了好几倍：

---

本编文章就介绍到这了。