reactjs - 如何优化 webpack/es6 开销？

Question

我一直在优化我的应用程序的加载时间，在优化我的代码并取得一些快速胜利后，我注意到似乎有一个 500 毫秒长的初始化阶段，其中所有的 require 语句似乎都得到了解决，或者其他什么。

这可以优化吗？如何优化？

我正在使用 webpack、react 和几个 npm 包。解压后的结果文件大小为 2.8M，压缩后的文件大小约为 900k。应用程序本身没有大量代码，主要是 npm 包。

我想知道我是否可以以不同的方式编译它以避免所有要求和非实时的要求。

更新:我目前正在使用带有重复数据删除插件的生产版本。

Answer 1

正如一些评论已经指出的那样，我们必须区分构建时和运行时。 referenced guide webpack 文档中的内容是关于构建性能。

虽然不使用源映射和压缩代码等开发工具会影响执行速度，但我认为最重要的是分块/延迟加载(正如 estus 已经指出的那样)。

您应该决定初始渲染不需要应用程序的哪些部分。这些部分应该移动到另一个 block 中并通过 require.ensure() 延迟加载。

通常您的路由器是异步加载内容的典型位置:

<Router>
    <Route
        path="/dashboard"
        getComponent={loadPage("Dashboard")}
    />
</Router>

function loadPage(page) {
    return (location, cb) => pages[page](cb);
}

const pages = {
    Dashboard(cb) {
        require.ensure(
            ["./Dashboard.js"],
            require => cb(null, require("./Dashboard.js").default)
            // .default is required in case you are using ES2015 modules
        );
    }
};

现在，仪表板上只需要的所有模块都将被移动到一个单独的 block 中。

详细的require.ensure部分甚至可以通过将所有顶级组件(我在这里称之为pages)移动到像pages这样的专用文件夹中来优化。然后你可以使用 bundle-loader 配置 webpack 始终异步加载这些东西。 :

// webpack.config.js
...
{
    test: /\.jsx$/,
    include: [
        path.resolve("path", "to", "pages"),
    ],
    loaders: [
        "bundle-loader?" + JSON.stringify({
            lazy: true
        })
    ]
},

然后你的路由器看起来像:

// This does not actually import the Dashboard,
// but a function which loads the dashboard.
import Dashboard from "path/to/pages/Dashboard";

function loadPage(page) {
    return (location, cb) => pages[page](module => {
        cb(null, module.default);
    });
}

const pages = {
    Dashboard
};

如果您 super 懒，只想引用相同的文件名而不手动创建 pages-对象，您也可以使用 require contexts :

function loadPage(page) {
    return (location, cb) =>
        require("./path/to/pages/" + page + ".jsx")(
            module => cb(null, module.default)
        );
}