文章の目录

一、具体需要 3 步：
- 1、安装 `@babel/plugin-syntax-dynamic-import` 包。
- 2、在 babel.config.js 配置文件中声明该插件。
- 3、将路由改为按需加载的形式，示例代码如下：
写在最后

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

一、具体需要 3 步：

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

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

2、在 babel.config.js 配置文件中声明该插件。

module.exports = {presets: ["@vue/cli-plugin-babel/preset"],plugins: [["component",{libraryName: "element-ui",styleLibraryName: "theme-chalk"}],"@babel/plugin-syntax-dynamic-import"]
};

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

const Login = () => import(/* webpackChunkName: "login_home_welcome" */ "./../views/Login.vue");

关于路由懒加载的详细文档，可参考如下链接：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Vue Router系列之路由懒加载相关推荐

Vue 路由懒加载
路由和组件的常用两种懒加载方式: 1.vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2.es提出的import(推荐使用这 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
Vue 路由懒加载和动态加载
什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间: 路由懒加载的原理? 底层是一个 ...
vue中的路由懒加载
文章目录路由懒加载 vue异步组件 ES import 常用路由懒加载懒加载本质是延迟加载或按需加载,即在需要的时候的时候进行加载. 首页不用设置懒加载,一个页面加载过后再次访问不会重复加载. ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
Vue路由懒加载（resolve）,嵌套路由 3
懒加载:又叫延时加载,即在需要的时候进行加载,随用即载使用懒加载的原因: 像vue这种(spy)单页面应用,如果没有使用到懒加载,webpack打包的文件过大,造成进入首页时,加载的资源过多,时间过 ...
Vue 路由懒加载根据根路由合并chunk块
路由懒加载的小技巧一般来说当我们的项目越来越大的时候,我们打包的文件也越来越大.这时候我们的首屏加载就会很慢.因此我们会使用到路由的懒加载机制来对我们的模块进行划分 export default n ...

Vue Router系列之路由懒加载

文章の目录

一、具体需要 3 步：

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

2、在 babel.config.js 配置文件中声明该插件。

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

写在最后

Vue Router系列之路由懒加载相关推荐

最新文章

热门文章

Vue Router系列之路由懒加载

文章の目录

一、具体需要 3 步：

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

2、在 babel.config.js 配置文件中声明该插件。

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

写在最后

Vue Router系列之路由懒加载相关推荐

最新文章

热门文章

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