vue 同一个路由 重新加载_vue项目性能优化之路由懒加载

参照官网 ：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

打包构建应用时，js包会变得非常大，影响页面加载。我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

1.首先需要进行npm安装babel 插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 在 .babelrc."plugins"中配置 "syntax-dynamic-import"插件,没有 "plugins"的话自己增加

 "plugins": [

    "syntax-dynamic-import", // 配置这个插件

    [

3.  webpack.prod.conf.js中，在build中找到webpack.prod.conf.js

将chunkFilename的 id 改成 name

在plugins 中添加 new webpack.NamedChunksPlugin() 插件

4. 接下来就是更改router 的配置，实现按需引入

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({routes: [    {path: '/',redirect: 'login'    },    {path: '/login',name: 'login',component: () => import(/* webpackChunkName: "login_home_welcome" */ '@/components/login.vue')    }   ]  })