路由懒加载导致热更新速度变慢问题

在SPA中，路由懒加载是提速一个重要手段，但是最近在项目中发现，由于前端路由数量的增加，每修改代码触发热更新，速度会越来越慢，目前已经达到可怕的100s以上，导致每次调试页面的时候等待时间很长，无疑增加了摸鱼的时间，影响开发效率。

解决方法

采用babel的pluginsbabel-plugin-dynamic-import-node,结合babel的BABEL_ENV环境变量，使只有在开发环境的时候才会生效

• 首先需要下载相关依赖

npm install babel-plugin-dynamic-import-node

• 然后在package.json开发环境运行命令dev中增加BABEL_ENV

"dev": "cross-env BABEL_ENV=development webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

• 最后在.babelrc文件中进行配置,并让其在dev环境下才生效

    "env": {
        "development": {
            "plugins": ["dynamic-import-node"]
        }
    }

除了项目第一次启动的时候还是有点慢，但后面热更新的速度很快，亲测有效。参考链接