这样在打包时，但凡 require('react-native') 的地方全都用 react-web 包替换，而 react-web 的 module.exports 与 react-native 的保持一致即可让代码不替换也可以工作。
此外配合插件还可以实现另外一种引入方法，请看下面。
通过 Haste 方法引入组件以提高性能
webpack 以及其他的支持 CommonJS 规范的打包工具，都会把文件中 require 的所有组件都打包在一起。对于 React Native 来说代码体积大小无关紧要，而在 Mobile web 来说，就要稍微重要一些了。特别是如果你的项目只需要 Text 组件，但由于 require('react-web') 结果把所有的组件全部打包进来了，就比较伤感。
基于 webpack 插件，还可以用另一种方式引入组件以解决这个问题，你可以叫它 Haste 方式。使用这种方式需要加载 webpack 插件 haste-resolver-webpack-plugin，默认的 webpack 配置已经帮你加载好了，你可以直接在组件里面这样用：
var Text = require('ReactText');
而不是以前那样：
var {Text} = require('react-native');
这样 webpack 打包时，对于前者，只会把那一个组件内容打包进来，因此可以减小体积、提升性能。这是怎么实现的呢？
加载了插件的 webpack 打包时，会先扫描所有组件并读取组件头部 @providesModule 的信息（比如 Text 组件的信息），然后当其他文件中 require 了这个组件名称，就会自动定位到这个文件进行打包。同时还可以区分平台，即便是同一个名字，打包时会区分平台去打包对应的文件（根据 index.xxx.js 的命名规则确定文件）。
您可能感兴趣的文章: