Vue jump page will flash-Front-end Q&A-php.cn

Vue jump page will flash

WBOY

Release： 2023-05-08 11:32:07

Original

2202 people have browsed it

前言

在Vue项目中，有时候会遇到跳转页面时会出现闪一下的现象，这会给用户带来不好的使用体验。今天本文将介绍这种现象的原因以及解决方法。

问题描述

当我们在Vue项目中使用Vue Router进行页面跳转时，有时候会看到页面在跳转的瞬间会出现短暂的白屏，然后才跳转到目标页面，这个过程很快，但是仍然会对用户产生不好的使用体验。

分析原因

出现这种现象的原因有很多，但是最常见的一个原因是由于Webpack的按需加载机制造成的。

Webpack按需加载机制可以在构建应用程序时减小应用程序的初始加载时间，但它也会导致在加载一个新页面时延迟了一些时间。这是因为Webpack需要异步加载这个页面的代码和相关依赖项，然后才能渲染这个页面。

解决方案

有很多解决方案可以解决这个问题。

使用Webpack内联代码

Webpack提供了一个内联代码的功能，可以将资源（HTML，CSS，JavaScript）打包成一个文件，并内联到HTML文件中。这可以减少资源请求的时间和数量，从而加快页面加载速度，减少页面闪烁的可能性。

将这段代码放置在webpack.config.js的plugins数组中：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin(/* ... */),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]), // 将代码内联到HTML中
  ],
};

Copy after login

在页面组件中添加过渡动画

可以在页面组件中添加Vue的过渡动画，这样在加载新页面时，动画将使页面渐变，从而缓解闪烁问题。

首先，在Vue组件中添加一个过渡动画，如下所示：

<template>
  <div class="example">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

Copy after login

然后，在样式表中定义这个过渡动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Copy after login

这个过渡动画将使页面渐变，从而缓解闪烁问题。

优化Webpack配置

我们可以尝试优化Webpack配置以缓解页面闪烁问题。

首先，可以尝试使用Webpack的splitChunks配置来减少代码分离。这可以减少异步加载的文件数量，从而加快页面加载速度。使用splitChunks的配置如下：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: -10,
          chunks: 'all'
        },
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    },
  },
};

Copy after login

然后，我们可以使用Webpack的DllPlugin来预先编译库文件，这可以降低打包时间并减少初始加载时间。使用DllPlugin的配置如下：

// webpack.config.js
const { DllPlugin } = require('webpack');

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'axios'],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]_library',
  },
  plugins: [
    new DllPlugin({
      name: '[name]_library',
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
    }),
  ],
};

// webpack.dev.config.js
const { DllReferencePlugin } = require('webpack');

module.exports = {
  plugins: [
    new DllReferencePlugin({
      manifest: path.join(__dirname, 'dist', 'vendor-manifest.json'),
    }),
  ],
};

Copy after login

这些优化将帮助我们减少网站的加载时间，并有效地缓解页面闪烁的问题。

总结

在Vue项目中，由Webpack按需加载机制造成的页面闪烁是一个常见的问题。在本文中，我们介绍了几种解决方案来缓解这个问题。无论您是使用内联代码，添加过渡动画还是优化Webpack配置，这些技巧都将帮助您提高用户的使用体验并带来更好的用户反馈。

The above is the detailed content of Vue jump page will flash. For more information, please follow other related articles on the PHP Chinese website!