前端学习（2742）：重读vue电商网站52之路由懒加载

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

具体需要 3 步：

安装 @babel/plugin-syntax-dynamic-import包。
在 babel.config.js 配置文件中声明该插件。
将路由改为按需加载的形式，示例代码如下：

Javascript

// /* webpackChunkName: "group-foo" */表示路由分组
// './Foo.vue' 表示路由存放路径
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

分在同一个组内的组件，当请求其中某一个组件时，组内其它组件也会同时请求。

关于路由懒加载的详细文档，可参考如下链接：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

@babel/plugin-syntax-dynamic-import 插件介绍传送门

npm

Javascript

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

打开 vue-ui 面板，选择开发依赖，输入 @babel/plugin-syntax-dynamic-import 进行安装

。

然后打开 babel.config.js 文件，在 plugins 数组内添加我们安装的依赖: '@babel/plugin-syntax-dynamic-import'，具体位置见下文所示：

Javascript

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
// 判断编译模式为生产环境
if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console')
}module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],...prodPlugins,'@babel/plugin-syntax-dynamic-import']
}

最后，将每一个组件更改为懒加载的形式：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/414604.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！