声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

编写文章背景

使用webpack打包前端单页面应用项目部署到服务器后，在浏览器中第一次访问主页的时候加载速度十分缓慢，持续白屏时间直奔 20s，后续访问由于浏览器缓存原因在不清理缓存的情况下再次请求响应速度正常了，但是换个新的浏览器再次访问首页还是要白屏很长一段时间进行加载，个人体验就十分不好，完全不能容忍

减少首屏渲染时长方案小结

常见优化方案

• 减小入口文件体积，实现方式常用路由懒加载
• UI框架按需加载
• 图片资源压缩，使用在线字体图标或者雪碧图合并多个小图标减轻http请求压力
• nginx配置gzip压缩

优化方案用例摘选

路由懒加载

• 以函数的形式加载路由，这样可以把各自的路由文件分别打包，只有在解析给定路由时，才会加载路由组件

    routes:[
    {
        path: "/web",
        name: "web",
        component: () => import("@/pages/web/Web.vue"),
    }
 ]
 //以函数的形式加载路由，这样可以把各自的路由文件分别打包，只有在解析给定路由时，才会加载路由组件

UI框架按需加载

• 在日常使用UI框架，例如element-UI、或者antd，我们经常性直接引用整个UI库

import Antd from 'ant-design-vue'
app.use(Antd)

• 但实际上我用到的组件只有Pagination，Space，BackTop 所以我们要按需引用

import { Pagination, Space, BackTop } from "ant-design-vue";

const app = createApp(App);

app.use(Pagination);
app.use(Space);
app.use(BackTop);

nginx配置gzip压缩

• 引入compression-webpack-plugin插件，然后通过nginx的配置，让浏览器直接解析.gz文件，提升加载速度。

    npm i --save-dev compression-webpack-plugin

• 修改 vue.config.js，相应位置加入以下代码。

const { defineConfig } = require("@vue/cli-service");
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = defineConfig({
  configureWebpack: {
    plugins:[
        new CompressionPlugin({
            test: /\.(js|css|less)$/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 不删除源文件
          })
      ]
    }
 })

• 在nginx中添加如下配置。

# compression-webpack-plugin 配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
# 配置禁用 gzip 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6].";