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

2022-07-10 04:31:08 阅读：277 来源： 互联网

参考：
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

标签：use,vue,resolve,js,Vue,gzip,加载,页面
来源： https://www.cnblogs.com/libaiyun/p/16462470.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

按需引入element-ui

关闭生成sourceMap文件

路由懒加载

使用gzip压缩