使用babel 的 plugins babel-plugin-dynamic-import-node。它只做一件事就是将所有的import()转化为require(),这样就可以用这个插件将所有异步组件都用同步的方式引入,并结合 BABEL_ENV 这个babel环境变量,让它只作用于开发环境下,在开发环境中将所有import()转化为require(),这种方案解决了之前重复打包的问题,同时对代码的侵入性也很小,你平时写路由的时候只需要按照官方文档路由懒加载的方式就可以了,其它的都交给babel来处理,当你不想用这个方案的时候,也只要将它从babel 的 plugins中移除就可以了。
具体代码:
首先在package.json中增加BABEL_ENV
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
接着在.babelrc只能加入babel-plugin-dynamic-import-node这个plugins,并让它只有在development模式中才生效。
{
"env"