Nice Paintings, Mondrian

    vue-ondemand-routing
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    vue-ondemand-routing 按需路由加载

    背景

    最近一直在用 Vite 开发,其基于原生 ES 模块,无需构建直接由浏览器来加载模块,启动速度很快,开发体验极好。所以想试试在 Webpack 中能否做到类似的事情,使用 Webpack,编译是无法避免的,所以本插件只是基于路由按需加载编译。

    实现

    内部使用了 vue-route-generator 来生成已访问过的路由定义,开发模式下首次编译生成空的路由组件,只加载入口文件所导入的模块,后续在前端应用拦截 vue-router 的跳转,加载新的路由,生产模式下打包所有路由。

    限制

    只适用于 Webpack v4 + Vue v2 + Vue Router v3,其实可以直接用 Vite...

    安装与使用

    npm install vue-ondemand-routing -D
    yarn add vue-ondemand-routing -D
    
    // in vue.config.js
    const { default: VueOndemandRoutingPlugin } = require('vue-ondemand-routing/plugin')
    const vueOndemandRoutingPlugin = new VueOndemandRoutingPlugin({
      pages: 'src/views',
      importPrefix: '@/views/'
    })
    
    module.exports = {
      configureWebpack: {
        plugins: [vueOndemandRoutingPlugin]
      },
      devServer: {
        before(app) {
          vueOndemandRoutingPlugin.middleware(app)
        }
      }
    }
    // router.js
    import autoRoutes, { autoRoutesHooks } from 'vue-ondemand-routing'
    import VueRouter from 'vue-router'
    
    const router = new VueRouter({
      routes: autoRoutes
    })
    
    // 拦截路由
    autoRoutesHooks({
      router,
      /* 可对路由进行修改 */
      beforeAppendRoutes: (routes) => routes
    })
    
    export default router

    全量的路由定义

    // 此文件(由vue-route-generator)生成了全量的路由定义,如果你需要用的话
    import fullDefinitions from 'vue-ondemand-routing/dist/definitions'
    console.log(fullDefinitions)

    参数

    支持 vue-route-generator 的所有选项,基本上只需要配置 vue-route-generator 的选项即可。

    以下是额外的参数:

    routesModulePath: string

    指定由 vue-route-generator 生成的路由定义文件路径,(由webpack-virtual-modules生成的虚拟文件),一般来说无需修改。

    默认是 node_modules/vue-ondemand-routing/dist/auto-routes.js

    apiPath: string

    前端页面访问新的路由时,向开发服务器发送的请求路径,用于生成新的路由定义,一般来说无需修改。

    默认是 __ondemand_routing

    apiParam: string

    apiPath 的请求参数,一般来说无需修改。

    默认是 route,与 apiPath 组成:__ondemand_routing?route=xxxxx

    forceFull: boolean

    是否强制在开发模式下生成全量路由定义,一般来说无需修改。

    默认 false

    成果

    对于一些路由特别多的项目效果不错,我的 100+ 路由的项目,每次开发就只开发一两个路由,首次构建可以降低 70% 左右,访问新路由时,构建 2 ~ 3 秒,和路由引用的文件大小有关。总体来说,对开发阶段来说节省了不少时间。

    Install

    npm i vue-ondemand-routing

    DownloadsWeekly Downloads

    122

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    30.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • thinkerljn