vue项目部署后页面加载首次很慢的优化方案

本文主要是介绍vue项目部署后页面加载首次很慢的优化方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

参考：
vue项目首次加载特别慢需要怎么配置？
1.看看你的依赖包是不是全局引入的，改为组件内按需引入，可大大降低加载时长。或者将组件引入方式改为cdn引入。需要注意的是，两种引入方式不能共存。
2.看network，点击ALL，看看哪些文件加载时间长，针对性的优化，静态文件压缩、js文件切片等
3.使用compression-webpack-plugin插件，修改配置文件，production环境下对超过10k的文件进行压缩，nginx部署时开启gzip
Vue项目部署后页面加载首次很慢的优化方案
发布前端项目时因chunk-vendors过大导致首屏加载太慢，Vue Build时chunk-vendors的优化方案
webpack Vue前端项目打包后生成的chunk-vendors文件过大，导致加载太慢,生成的js文件过多，http请求太频繁问题解决
vue项目打包优化之-productionSourceMap设置
Vue-cli3 项目配置 Vue.config.js
vue之解析vue.config.js中的配置项之publicPath
Vue runtime-compiler与runtime-only
vue-router路由懒加载（解决vue项目首次加载慢）
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
Vue CLI3 开启gzip压缩
Nginx开启Gzip详解

按需引入element-ui

src\main.js

// 按需引入element-ui
import "./plugins/element"

// 全局引入
// Vue.use(Element)

src\plugins\element.js

import Vue from "vue"

import {
    Button, Avatar, Link, Divider, Timeline, TimelineItem, Card, Pagination,
    Container, Main, Header, Form, FormItem, Input, MessageBox
} from "element-ui"

Vue.use(Button)
Vue.use(Avatar)
Vue.use(Link)
Vue.use(Divider)
Vue.use(Timeline)
Vue.use(TimelineItem)
Vue.use(Card)
Vue.use(Pagination)
Vue.use(Container)
Vue.use(Main)
Vue.use(Header)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 踩坑了, 我以为是Alert组件
Vue.prototype.$alert = MessageBox

重新构建一下

npm run build

发现好像并没什么卵用，静态文件还是那么大。

关闭生成sourceMap文件

source map 直译过来就是资源地图。所以，source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。

编辑项目根路径下vue.config.js文件，将productionSourceMap设置为false

module.exports = {
    // 部署应用包时的基本URL, 默认"/", 示例http://localhost:80/index
    // 若改为/app, http://localhost:80/app/index
    publicPath: "/",
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader是否在保存的时候检查
    lintOnSave: false,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // 从main.js看本项目应该是runtime-only, "render: h => h(App)"
    // runtimeCompiler: false,
}

重新构建一下

npm run build

小了！dist小了好多~

路由懒加载

src\router\index.js

把路由都改成懒加载

const routes = [
    {
        path: '/',
        name: 'Index',
        // 我猜通过name跳转路由会经过Blogs的懒加载
        redirect: {name: "Blogs"} // 或者redirect: Blogs
        // redirect: resolve => require(["../views/Blogs"], resolve) // error, redirect不能指向懒加载
    },
    {
        path: '/blogs',
        name: 'Blogs',
        // component: Blogs
        // 路由懒加载
        component: resolve => require(["../views/Blogs"], resolve)
    },
    {
        path: '/login',
        name: 'Login',
        // component: Login
        component: resolve => require(["../views/Login"], resolve)
    },
    {
        path: '/blog/add',
        name: 'BlogAdd',
        // component: BlogEdit,
        component: resolve => require(["../views/BlogEdit"], resolve),
        meta: {
            requireAuth: true
        }
    },
    {
        path: '/blog/:blogId',
        name: 'BlogDetail',
        // component: BlogDetail,
        component: resolve => require(["../views/BlogDetail"], resolve)
    },
    {
        path: '/blog/:blogId/edit',
        name: 'BlogEdit',
        // component: BlogEdit,
        component: resolve => require(["../views/BlogEdit"], resolve),
        meta: {
            requireAuth: true
        }
    }
]

使用gzip压缩

安装gz打包插件 compression-webpack-plugin

# npm i -D compression-webpack-plugin
npm install --save-dev compression-webpack-plugin

修改项目根路径下vue.config.js

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin")
// 定义压缩文件类型
const productionGzipExtensions = ["js", "css"]

module.exports = {
    // 添加Webpack配置
    configureWebpack: config => {
        return {
            plugins: [
                new CompressionWebpackPlugin({
                    algorithm: "gzip",
                    // 匹配文件名
                    test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
                    // 对超过10K的数据进行压缩
                    threshold: 10240,
                    // 是否删除原文件
                    deleteOriginalAssets: false,
                    minRatio: 0.8
                })
            ]
        }
    }
}

修改nginx配置，打开gzip

在server下添加

# 开启gzip
gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 9;

gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 禁用IE6 gzip
gzip_disable "MSIE [1-6]\.";

或者执行

cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf_bak && cat >> /etc/nginx/conf.d/default.conf <<EOF

gzip on;
gzip_min_length 1k;
gzip_buffers 16 64k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

EOF

重新加载nginx配置

nginx -s reload

访问项目，网络中检查是否成功开启gzip

这篇关于vue项目部署后页面加载首次很慢的优化方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！