Question

由于嵌入了html5视频，我的Vue项目变得有点大，我想知道如何解决此网站的加载问题。

有没有办法知道是否所有内容都在Vue中加载，这样我就可以在一切就绪之前显示加载屏幕？这种加载是否考虑了图像，视频等资源的加载？

Answer 1

如果您想在显示视频之前等待网页的其余部分完成加载，您可以等到窗口加载（load事件），然后通过v-if显示视频。

这里还有一些需要考虑的事情（你正在使用webpack，对吗？）：

代码拆分

如果你的JS包太大了，你可以将它拆分成更小的块，webpack运行时会根据需要异步下载这些块。

我喜欢将我的供应商代码拆分为一个单独的块，以及拆分一些路由器组件，如下所示：

{
  path: 'foo',
  component: () => import('./components/foo.vue'),
}

有关详细信息，请参阅Code Splitting（Webpack文档）和Async Components（Vue文档）。

正在加载页面

当浏览器在引导Vue应用程序之前下载HTML和JS资产时，您的网页最初将显示为空白。在此期间，您可以显示所需的任何纯HTML内容，然后将根Vue组件安装在加载HTML上。

const App = {
  template: '<div>My App</div>',
};

function bootstrap() {
  new Vue({
    el: '#app',
    render: h => h(App),
  });
}

// Simulate loading
setTimeout(bootstrap, 2000);

body {
  font-family: sans-serif;
}

@keyframes loading-anim {
  from { opacity: 1; }
  to { opacity: 0.3; }
}

.loading {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 40px;
  color: #888;
  letter-spacing: -0.05em;
  font-weight: bold;
  animation: loading-anim 1s ease-in-out alternate infinite;
}

<div id="app">
  <!-- Put whatever loading HTML content here -->
  <div class="loading">LOADING</div>
</div>

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

检查Vue中是否已加载所有内容（包括视频）？

1 个答案:

代码拆分

正在加载页面