发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

---

Vue 首屏加载过慢的优化方法

Vue 应用在首屏加载时速度过慢，通常与以下问题有关：打包文件过大、网络请求过多、资源加载过慢。针对这些问题，可以从以下几个方面进行优化：

---

1. 减小项目打包体积

打包体积是首屏加载慢的核心原因之一。优化方法包括：

1.1 代码分割 (Code Splitting)

通过 异步加载 和 路由懒加载，只在需要时加载组件，减小首屏包体积。

• 路由懒加载：将路由对应的组件进行异步加载。

  const Home = () => import('@/views/Home.vue'); // 异步加载
  const About = () => import('@/views/About.vue');
  export default new VueRouter({
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
  

• 动态导入组件：使用 import() 进行按需加载。

---

1.2 提取公共库和依赖

将第三方库 (如 Vue, Element-UI) 和业务代码分开打包，利用 CDN 加速加载。

• 使用 CDN 引入第三方库：减少打包体积。
  在 index.html 中通过 CDN 引入第三方库：

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  

• Webpack 配置 externals：

  module.exports = {
    externals: {
      vue: 'Vue', // 使用外部 Vue 而不打包
      axios: 'axios'
    }
  };
  

---

1.3 Tree Shaking

确保无用代码被移除，减小包体积。

• 开启生产模式打包：使用 mode: 'production'，开启 Tree Shaking 和压缩。
• 按需引入 UI 组件库：
  使用按需加载代替全局引入：

  import { Button, Select } from 'element-ui';
  Vue.component(Button.name, Button);
  Vue.component(Select.name, Select);
  

---

2. 优化资源加载

2.1 图片优化

• 懒加载：使用 vue-lazyload 只在图片进入视口时加载。

  import VueLazyload from 'vue-lazyload';
  Vue.use(VueLazyload, { loading: 'loading.gif' });
  

• 图片压缩：将大图压缩为更小的格式（如 WebP）。

• 使用合适的分辨率：移动端适配时，使用低分辨率图片。

2.2 减少 HTTP 请求

• 合并小文件：使用雪碧图 (Sprite) 或 Base64 编码小图标，减少 HTTP 请求。
• 启用 Gzip 压缩：在服务器端配置 Gzip：
  • Nginx 示例配置：

    gzip on;
    gzip_types text/plain application/javascript text/css;
    

2.3 使用缓存

• 开启浏览器缓存：对静态资源 (CSS、JS、图片等) 进行长期缓存。

  location ~* \.(js|css|png|jpg|jpeg|gif|svg)$ {
      expires 30d;
      add_header Cache-Control "public, no-transform";
  }
  

• 使用 Service Worker：实现本地缓存，提高加载速度。

---

3. 优化首屏渲染

3.1 SSR (服务端渲染)

服务端渲染可以大幅加快首屏加载速度，解决首屏白屏问题。

• 使用 Nuxt.js 轻松实现服务端渲染。

---

3.2 预渲染 (Pre-rendering)

对于纯静态页面，可以使用预渲染插件将页面提前渲染成 HTML 文件。

• 使用 prerender-spa-plugin：

  const PrerenderSPAPlugin = require('prerender-spa-plugin');
  const path = require('path');
  module.exports = {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [ '/', '/about', '/contact' ]
      })
    ]
  };
  

---

3.3 骨架屏

在首屏渲染前显示骨架屏，提升用户体验。

• 使用插件如 vue-skeleton-webpack-plugin。

---

4. 提升网络性能

4.1 使用 HTTP/2

开启 HTTP/2 协议，支持多路复用，加快资源加载速度。

4.2 减少首屏请求

• 合理设置 async 和 defer 属性，优化 JS 加载顺序。

  <script src="app.js" defer></script>
  

4.3 预加载资源

利用 rel="preload" 提前加载关键资源：

<link rel="preload" href="main.css" as="style">

---

5. 分析和监控性能瓶颈

5.1 使用工具分析

• Chrome DevTools → Performance 面板分析加载时间和瓶颈。
• 使用 Lighthouse 工具进行性能评估。

5.2 持续监控

使用性能监控平台（如 Sentry 或 Google Analytics）监控页面性能。