Vue实现路由懒加载，路由优化策略

2020-12-16   阅读：1860   分类：前端    标签： Vue

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同代码块，然后当路由被访问的时候在加载对应组件，这样就更加高效了。

如何实现路由懒加载呢？

1、安装@babel/plugin-syntax-dynamic-import

image.png

或命令安装

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

2、在label.config.js配置中声明该插件

"@babel/plugin-syntax-dynamic-import"

image.png

3、将路由改为按需加载形式，示例代码如下

const Login = () => import(‘/components/Login.vue’)
const Home = () => import(‘/components/Home.vue’)


【腾讯云】 爆款2核2G3M云服务器首年 61元，2核2G4M云服务器新老同享 99元/年，续费同价

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号，获取最新文章动态
 转载：请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/549.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇： phpstudy8.0如何配置https证书，实现http访问

下一篇： 花一个多月时间学习写的一个laravel8+vue后台

相关文章

● vue如何打包项目，vue打包项目上线教程 ● vue.js 最基本的功能介绍教程 ● Vue cli 安装慢的解决方法 ● 创建vue项目实例 ● npm 和 cnpm的区别和安装 ● npm ERR! missing script: serve 报错解决方法

文章评论（0）

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习，乐于分享

置顶推荐

代码版本管理工具Git常用命令操作

代码版本管理工具Git常用命令操作
html前端按钮效果

html前端按钮效果
swiper插件的使用

swiper插件的使用
管理服务器常见的几个命令

管理服务器常见的几个命令
【腾讯云】 爆款2核2G3M云服务器首年 61元，2核2G4M云服务器新老同享 99元/年，续费同价

标签云

PgSQL Highlight SqlServer 字节跳动 企业微信 uView MongoDB 微擎 wepy ES6 游戏 uni-app WordPress canvas FaceBook SEM 云存储 刷机 Flutter vscode Docker RabbitMQ SVN composer 插件 路由器 TP6 OneThink Vue swoole Redis 帝国cms CodeIgniter 虚拟机 方法技巧 防护 软件下载 JavaScript AI go语言 Android JAVA Git Layui React 区块链 Laravel Mysql node.js html linux window ECharts GITHUB bootstrap UEditor SEO 模板 服务器 微信开发 ECSHOP style 正则 PhpStorm 轮播插件 sublime text 工具 layui.js Python 操作系统 PhotoShop jquery TP5 ThinkPHP AJAX PHP API office 微信小程序 织梦cms

浏览排行

1 Facebook账号注册流程,手把手教你注册脸书账号 2 phpstorm 2019.2.1最新版激活码及破解教程更新至2021 3 oppo a57手机miui_V8.5.4.0刷机包下载及刷机教程 4 抖音发布视频作品定位设置成其他位置方法 5 npm ERR! missing script: serve 报错解决方法 6 解决Photoshop 打开报错找不到 VCRUNTIME140_1.dll问题 7 解决Vue报错Module not found: Error: Can't resolve 'less-loader' in 'C:\Users\Hm\Desktop\vue\vue_shop'问题 8 解决微信公众号分享给好友，朋友圈报错errMsg: "onMenuShareAppMessage:fail, the permission value is offline verifying" 9 解决win10分屏设置主显示器后图标不在主显示器问题 10 解决Linux 宝塔装完了提示“请先安装Web服务器！” 11 解决Centos7执行安装命令显示您需要 root 权限执行此命令 12 xftp 6破解版下载
服务器2核2G 低至60元/年起

最近热文

1 PHPStorm2020.1永久激活及下载，更新至2023 2 PostgreSQL数据库，pg数据库的一些操作命令 3 解决laravel-admin 登录无限重定向问题 4 PHP结合安卓APP，监听支付宝收款，实现个人支付宝支付接口 5 ThinkPHP6自带分页定制，自定义分页类 6 Word2010如何从指定页设置页码 6 《真还传》,6亿债务已还超4亿 预计1年多之内就能还清 7 网易跟贴正在整改 暂不支持发贴 8 国务院今天发布2021节假日安排，元旦3天，春节7天，劳动节5天 9 快手视频去水印方法，如何去除快手视频水印

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！
微信扫码：你说多少就多少~
微信扫码
支付宝扫码：你说多少就多少~
支付宝扫码

友情链接

冯奎博客 陌路寒暄 淘优惠 简忆工具箱 vipbic 图鸟社区 c32's blog 武林新纪元

关于简忆关于简忆

本站内容源于作者编写，部分引用源于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解!

成功是熬出来的，本事是逼出来的，不积跬步无以至千里。

简忆诞生的故事简忆诞生的故事

官方公众号

官方公众号

官方小程序

官方小程序

技术闲聊

QQ群：简忆blogs技术群

站长：2938039696

Email：2938039696@qq.com

Git： github github

架构统计

网站地图：XML网站地图

主题框架：Foundation5

运行天数：

文章总数：1157

Copyright© 2017-2024 简忆博客版权所有工信部粤ICP备16092285号

×