vue-cli路由懒加载

最新推荐文章于 2023-08-12 10:11:18 发布

草莓冻冻

最新推荐文章于 2023-08-12 10:11:18 发布

阅读量581

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/tyoubinn/article/details/108939399

版权

本文介绍了如何在Vue CLI项目中实现路由懒加载，以提高页面加载效率。通过安装和配置@babel/plugin-syntax-dynamic-import插件，以及修改router.js文件，将路由组件改为按需加载的方式，实现路由被访问时才加载对应组件的功能。

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

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

路由懒加载实现步骤：

作用：用以解析识别import()动态导入语法—并非转换，而是解析识别

npm install babel-plugin-syntax-dynamic-import

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.

关注