1

我有一个应用程序，我必须使用 babel 构建代码并做出反应。该应用程序将使用 gulp 和 webpack 构建，用于自动构建创建和部署。当使用 gulp 和 webpack 将 babel+react 代码转换为浏览器可解释代码时，我们需要使用 npm 安装 react 并且必须在所有文件中导入，示例代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './helloWorld.jsx';
import HelloMe from './hello-me.jsx';

ReactDOM.render(
    <HelloWorld />,
    document.getElementById('app-test')
);

ReactDOM.render(
    <HelloMe />,
    document.getElementById('app-container')
);

现在，问题是这个代码在与 webpack 捆绑时，将 react 和 react-dom 库代码捆绑到捆绑文件中。因此，我将无法缓存这些库文件以在不同的视图中加载。因此，相同的库代码将在不同的捆绑文件中一次又一次地加载。有没有办法单独加载这些文件而不是捆绑文件？

4

1 回答 1

3

Edit your Wabpack configuration file and specify React & ReactDOM as externals.

externals: {
  "react": "React",
  "react-dom": "ReactDOM",
},

Then, include React & ReactDOM from CDN or your prefered source.

Whenever you call import React from 'react' or require('react') (or react-dom), Webpack gives you external copy of library

于 2016-04-28T13:17:10.653 回答