Webpack 实现 React-Router 组件 Code Splitting

参考:https://segmentfault.com/a/1190000011128817

这里只是对这篇文章做一个补充。

应我前文的操作,我引入了react-app-rewired 来修改 Webpack 配置。

那么接下来继续引入上面文章提到的 babel-plugin-syntax-dynamic-import 插件。

这里使用 react-app-rewired 的 injectBabelPlugin 函数完成。

最后结果大概是这样。

然后安装 react-loadable ,修改路由设置。

本来是足够优雅了,但是组件加载的时候我们最好还是给用户一点反馈,于是自然想到了引入 Nprogress 。

本来是想,如果在每一个动态 import 的地方都在前后应用 Nprogress,未免会有太多重复代码,于是写了下面的函数来封装一下

然后发现,不起作用,提示找不到指定的组件。

直接用import引入可行,这个封装了一层的函数不行。

坑了一会儿之后找到如下描述

Dynamic imports and webpack

Although the specification for import() supports a dynamic importing of modules in the browser runtime, webpack’s require.ensure() is not dynamic and requires a hardcoded string to work correctly. For more information see webpack’s documentation on dynamic requires.

好好好。不支持是吧。行。走了。

这个坑放着,以后再看看咋整。

发表评论

电子邮件地址不会被公开。 必填项已用*标注