vue 项目加载顺序_vue项目性能优化之路由懒加载

最新推荐文章于 2024-05-17 17:50:07 发布

akun 75

最新推荐文章于 2024-05-17 17:50:07 发布

阅读量239

点赞数

文章标签： vue 项目加载顺序

本文链接：https://blog.csdn.net/weixin_42498487/article/details/113452895

版权

本文探讨了如何优化Vue项目的加载速度，通过路由懒加载将不同路由的组件分割为独立的代码块，仅在访问时加载。遵循Vue官方文档，详细介绍了安装babel插件、配置.babelrc文件、修改webpack.prod.conf.js设置chunkFilename和添加NamedChunksPlugin，以及调整router配置以实现按需引入组件。

摘要由CSDN通过智能技术生成

参照官网：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')    }   ]  })