使用webpack.require优化vue项目的路由

之前做一个后台系统的时候，前期路由也就十多个，就是使用的文档中的那种写法：

import Vue from 'vue';    const Login = () => import('@/components/login/login');
const Index = () => import('@/components/home/index');
// balaba.......前期少量的路由
export default new Router({
routes: [ {                               path: '/login',                     name: 'Login',                   component: Login,                 },{                     path: '/home',                redirect: '/operation/info/list',                  name: 'home',},                      //babal..........前期少量的路由     ])
复制代码

在后期需求越来越来之后，整个项目的页面达到了200+，此时的路由用之前的写法无疑显得特别冗余，且在团队协作的时候同时修改此文件容易冲突。

上图是项目后期部分路由对应文件的引入，此时的项目特别难以维护。为了解决这个问题，我们项目使用了webpack.require这个方法解决。引用官方定义使用 require.context() 方法来创建自己的上下文（模块）。你可以给这个方法传3个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，一个匹配文件的正则表达式。
既：require.context('../view',true,/\.(vue|js)$/),第一个参数指的是要检索的文件路径，第二个参数是指是否检索子目录，第三个参数需要传入一个正则表达式来匹配被检索目录下符合正则的文件（如上正则为匹配被检索目录所有vue/js文件）。
最终，我们的router.js从几百行的路由配置优文件化成了仅仅几十行代码的文件。
参考文章：https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md

转载于:https://juejin.im/post/5ab86990f265da238532d95e

使用webpack.require优化vue项目的路由相关推荐

vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
创建基于webpack打包的vue项目
创建基于webpack打包的vue项目结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
nginx加载图片慢_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...
优化 Vue 项目编译文件大小
与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小.以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不 ...
Nginx部署Vue项目动态路由刷新404
目录前言第一次第二次前言记录下Nginx部署Vue项目刷新404的解决方案,遇到了两次,route用的是history路由模式,动态路由: {path: '/article/:blogId' ...
创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...
创建vue项目(三)路由跳转、反向代理、本地存储、状态管理
数据更新渲染,axios请求数据,配置环境一.路由跳转 app.vue <template><div id="app"><keep-alive> ...

使用webpack.require优化vue项目的路由

使用webpack.require优化vue项目的路由相关推荐

最新文章

热门文章