vuecli3 打包加载超慢_Vue-cli3.0的打包性能优化方案

项目背景

项目模板使用的是基于Vue-cli3的vue-admin-template

项目是单页后台

项目属于中小型项目

问题 - 首屏加载非常慢

让我们看看没任何处理的测试包

首屏加载竟然需要5-10s的加载时间! 这肯定是不符合线上要求的

分析一下加载的资源,明确发现以下问题

elementUI的js文件太大了,严重影响速度

整体代码未压缩

某张图片,静态资源过大,应减小该图片体积,或者优化静态资源加载速度

如何优化

前端开启gzip

关于这一点作者文档中分析构建文件体积有提到,但是却没有给出解决方案,配置如下

服务器开启nginx后,代码经过压缩就会小很多,但是如果我们打包后的代码没有压缩过,那就是服务端来负责压缩,自然会拖慢服务端加载速度,我们应该在webpack中开启压缩

生成压缩代码的webpack插件

npm install compression-webpack-plugin -D

复制代码

修改vue.config.js

该对象将会被 webpack-merge 合并入最终的 webpack 配置。具体请看webpack相关

configureWebpack: config => {

const baseConfig = {

name: name,

resolve: {

alias: {

'@': resolve('src')