vuecli3 打包加载超慢_vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）...

今天打算上线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文件