Question

我正在使用gulp和browserify做出反应。我正在一个网站上工作，我想在两个不同的位置（网址）嵌入反应元素。元素是不同的，但重用大多数底层组件。

如果你有多个入口点，告诉你做出反应的正确方法是什么，渲染哪个组件？

我可以轻松创建两个不同的js文件，并在相应的页面上加载相关文件。但据我了解，这也将加载所有库和组件两次，并在服务器上加载不必要的负载。

我还可以对入口点使用不同的id并捕获“目标容器不是DOM元素”。如果找不到id，则会出错，但感觉不对。

感谢您的帮助！

Answer 1

听起来好像你在询问有关代码拆分的问题。为此，我建议使用webpack。有code splitting documentation和example of multiple entry point code splitting。

webpack配置如下所示：

var path = require("path");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        pageA: "./pageA",
        pageB: "./pageB"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    plugins: [
        new CommonsChunkPlugin("commons.js")
    ]
}

_{免责声明：我还没试过这个。}

Answer 2

单独的URL是单独的HTTP请求，因此当有人访问任一URL时，页面的全部内容都会重新加载。想象一下＆＃39;来源＆＃39; Chrome web检查器的选项卡只是用html，css和javascript读取一个长文件的更有效方式。 React和所有其他库都包含在您的任一页面的一个长文件中。

您的解决方案＆＃34;创建两个不同的js文件并在相应的页面上加载相关文件＆＃34;是正确的答案，并且在服务器上没有任何不必要的负载。＆＃34;

重载服务器的解决方案是通过CDN实现缓存和服务模块。

为两个类似的反应应用程序使用两个不同的入口点

2 个答案: