vue 关于keep-alive 的使用和异部组件使用（webpack打包）

是CN的吖～

于 2024-06-11 22:44:42 发布

阅读量1.1k

点赞数 30

文章标签： vue.js webpack 前端

本文链接：https://blog.csdn.net/2301_80277620/article/details/139610042

版权

keep-active 官网说明: 保持活力 |Vue.js (vuejs.org)

一、KEEP-ACTIVE 说明

<KeepAlive>是一个内置组件，允许我们在多个组件之间动态切换时有条件地缓存组件实例。

如以下代码

当你点击home按钮， F12 会出现相对应的console.log，即创建，再点击其他的，home 会销毁4

但是加上keep-active则不会销毁，它会一直在，保持活跃！！！

APP.vue：

<template>
    <div class="app">
       <div class="tabs">
          <template v-for="(item) in tabs" :key="item">
             <button :class="{active: currentTab===item}" 
                    @click="itemClick(item)"><!--点击使名字等于tabs里的内容-->
             {{ item }} <!--item即tab-->
             </button>
          </template>
       </div>
       <div class="view">
         <!--内部缓存，保存数据，不用再创建销毁 F12看console-->
         <!--全部缓存-->
         <!-- <keep-alive>
            <component :is ="currentTab"></component>
         </keep-alive> -->

         <!-- 只有包含的会缓存 home,about-->
          <!-- 组件的名称来自于组件定义的时候name选项 -->
         <keep-alive include="home,about">
            <component :is ="currentTab"></component>
         </keep-alive>
         <!-- include名称匹配的缓存
         exclude名称匹配的不缓存
         max一旦达到这个数字，那么存缓的组件中最近没有被访问的会被销毁 -->
       </div>
    </div>
  </template>
  
  <script>
  import Home from './vues/Home.vue'
  import About from './vues/About.vue'
  import Category from './vues/Category.vue'
  
  export default {
  
     components:{
        Home,
        About,
        Category,
     },
  
     data() {
       return{
          tabs:["home","about","category"],
        //   currentIndex:0
        currentTab:"home"//初始
       }
     },
     methods:{
       itemClick(tab){
         this.currentTab= tab
       }
     }
  }
  </script>
  
  <style scoped>
  .active{
     color:red
  }
  </style>

Home.vue:

<template>
  <h2>home </h2>
  <h2>当前计数{{ counter }}</h2>
  <button @click="counter++">+1</button>
</template>

<script>
export default {
  name: "home",
  data(){
    return{
      counter: 0
    }
  },
  created(){
    console.log("home created")
  }, 
   unmounted(){
    console.log("home unmounted")
   },

   //对于keep-alive 组件 ，监听没有进行切换
   //进入活跃状态，表选中
  activated(){
    console.log("home activated")
  },
  deactivated(){
    console.log("home deactivated")
  }
}
</script>

<style>

</style>

Category.vue:

<template>
    <h2>category</h2>
  </template>
  
  <script>
  export default {
    name: "category",
   unmounted(){
    console.log("category unmounted")
   }
  }
  </script>
  
  <style>
  
  </style>

二、webpack打包，异部组件使用说明

npm run build !!! => dist 文件变小，移除空格，更快

将项目分离成一个独自的文件夹且优化，加快载入速度, 生成映射文件有错误会从.map文件提示在源码第几行

当你说一个组件是“异步的”时，通常意味着这个组件的代码不是在应用启动时立即加载的，而是在需要渲染这个组件时才会被加载。

Vue中Webpack分包与异步组件的使用主要涉及以下几个方面：

一、Webpack分包

Webpack分包（也称为代码分割）是一种优化技术，它允许将代码分割成多个小块，以便在不同的页面或情境中按需加载。这样可以显著减小初始加载的资源大小，提高网页性能。Webpack提供了几种方式来设置分包，其中最常见的是使用动态导入和Webpack的内置功能SplitChunksPlugin。

步骤和关键点：

安装Webpack（如果尚未安装）。
使用动态导入：在代码中，使用动态导入来实现分包。这会告诉Webpack将导入的模块打包成单独的文件。
配置Webpack：在Webpack配置文件中，需要做一些调整以启用分包。通常，Webpack的默认配置已经支持分包。如果需要自定义配置，可以设置optimization.splitChunks选项来指定如何分割代码。

二、Vue中的异步组件

Vue异步组件是指通过异步方式加载的组件。当项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载。这样做可以很好地提高用户体验，加快页面的载入速度。首次打开页面会比较慢。

异步组件的注册和加载方式：

基础使用：通过Vue.component方法注册一个异步组件，该组件的工厂函数会返回一个Promise对象，当Promise解析时，组件才会被加载和渲染。
import引入组件：在Vue文件中，可以直接使用import()语法来异步加载组件。这种方式与Webpack的code-splitting功能配合使用，可以将组件分割到不同的bundle中，按需加载。
局部注册：在Vue组件的components选项中，也可以注册异步组件。

总结：

Webpack分包和Vue异步组件都是优化前端性能的重要手段。
Webpack分包通过动态导入和配置优化，将代码分割成多个小块，按需加载，减小了初始加载的资源大小。
Vue异步组件通过异步加载和渲染组件，提高了页面的加载速度和用户体验。两者结合使用，可以进一步提升前端应用的性能。

代码演示：（上面为keep-active用法）

<template>
    <div class="app">
       <div class="tabs">
          <template v-for="(item) in tabs" :key="item">
             <button :class="{active: currentTab===item}" 
                    @click="itemClick(item)"><!--点击使名字等于tabs里的内容-->
             {{ item }} <!--item即tab-->
             </button>
          </template>
       </div>
       <div class="view">
         <!--内部缓存，保存数据，不用再创建销毁 F12看console-->
         <!--全部缓存-->
         <!-- <keep-alive>
            <component :is ="currentTab"></component>
         </keep-alive> -->

         <!-- 只有包含的会缓存 home,about-->
          <!-- 组件的名称来自于组件定义的时候name选项 -->
         <keep-alive include="home,about">
            <component :is ="currentTab"></component>
         </keep-alive>
         <!-- include名称匹配的缓存
         exclude名称匹配的不缓存
         max一旦达到这个数字，那么存缓的组件中最近没有被访问的会被销毁 -->
       </div>
    </div>
  </template>
  
  <script>
  import { defineAsyncComponent } from 'vue';//单独打包必须引用的
  import Home from './vues/Home.vue'
  import About from './vues/About.vue'
//   import Category from './vues/Category.vue'
// const Category =import("./vues/Category.vue")
// 单独打包 用的import函数
const AsyncCategory = defineAsyncComponent(()=>import("./vues/Category.vue"))
  

// 异部组件写法二
// const AsyncHome = defineAsyncComponent({
//    loader:()=> import("./vues/Category.vue"),
//    loadingComponent:Loading,
//    errorComponent:Error,
//    delay: 2000,//在显示 loadingComponent之前的延迟  默认值200ms
// 如果提供了 timeout 并且加载组件超过了设定，将显示错误组件
// 默认值：Infinity 永不超时 ，单位 ms
//    suspensible: true  //定义组件是否可挂起，默认值 true
// });


  export default {
  
     components:{
        Home,
        About,
        Category: AsyncCategory,
     },
  
     data() {
       return{
          tabs:["home","about","category"],
        //   currentIndex:0
        currentTab:"home"//初始
       }
     },
     methods:{
       itemClick(tab){
         this.currentTab= tab
       }
     }
  }
  </script>
  
  <style scoped>
  .active{
     color:red
  }
  </style>

main.js文件：

// import './assets/main.css'

// 这里引用不会单独分包会一起打包

import { createApp } from 'vue'
// import App from './组件嵌套使用/App.vue'
// import App from './父传子通信/App.vue'
// import App from './子传父通信/App.vue'
// import App from './04-案例衣物/App.vue'
// import App from './05-组件插槽/App.vue'
// import App from './06-provide-inject/App.vue'
// import App from './07-事件总线使用/App.vue'
// import App from './08-生命周期/App.vue'
// import App from './09-ref获取元素组件/App.vue'
// import App from './10-动态组件的使用/App.vue'
// import App from './11-Keep-Alive的使用/App.vue'
import App from './12-异部组件的使用/App.vue'

// 这里添加import函数会单独分包  

createApp(App).mount('#app')

自己编写的代码在app.js里面