vue-cli3项目首页加载速度优化

今天打算上线vue的单页面项目，上线后，首页加载速度巨慢！

原因是项目上线后，网速不够快，加载js，css等资源很慢，

打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大，达到了4千多kb，简直不能忍！（vendors的文件是项目中引入的第三方库，打包好的文件）

网上查了查，有很多优化方法，我从简单的开始吧

我选择的第一个优化方式是，给webpack开启gzip压缩，能够将文件体积减少60%。

下面来说一下开启gzip压缩的具体步骤

npm i -D compression-webpack-plugin

在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：

const path = require("path");
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

const webpack = require("webpack");
// vue.config.js
module.exports = {
  //基本路径(相对于服务器根目录   静态资源的相对路径)
  publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制

  productionSourceMap:false,//打包时不要map文件
  //输出文件目录
  outputDir: "dist",

  //是否在保存的时候检查
  lintOnSave: true,

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'statick',

  devServer: {
    // host: 'localhost',
    // host: "0.0.0.0",
    // https: false, // https:{type:Boolean}
    // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/
    // hotOnly: true, // 热更新
    port: 8090
    // proxy:{
    //   '/': {
    //     target: 'http://192.168.0.125:3000/',
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
  },
  configureWebpack: {//引入jquery
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      }),
      new CompressionPlugin({//gzip压缩配置
        test:/\.js$|\.html$|\.css/,//匹配文件名
        threshold:10240,//对超过10kb的数据进行压缩
        deleteOriginalAssets:false,//是否删除原文件
      })
    ]
  },
};

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。over

原文地址：https://www.cnblogs.com/fqh123/p/11042406.html