如何优化 webpack/es6 开销？

Question

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

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

我正在使用 webpack、react 和耦合几十个 npm 包。 结果文件是 2.8M 解压缩和大约 900k 压缩。应用本身的代码量并不大，主要是 npm 包。

我想知道我是否可以通过不同的方式编译它来避免所有需要以及什么不是实时的。

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

Answer 1

您可以做的一件事是使用devTool config 并更改生成源地图的方式。这应该会以牺牲调试的便利性为代价来加快速度。

Webpack 实际上在 http://webpack.github.io/docs/build-performance.html 上有一个关于如何优化性能的很棒的小指南。

基本上，它归结为您认为需要多少调试信息。

通过设置

{
  devtool: "#source-map"
}

您保留原始代码，这显然是最容易调试的，但这是以文件大小/构建时间为代价的。

更新： 根据下面克里斯的评论，这里是another guide

Answer 2

我不相信您的时间线来自缩小代码（比较映射文件中的 __webpack_require__ 和缩小代码中的 f）。

我将展示 minify 和一些插件可以将这个脚本的运行时间减少两倍。在 webpack 配置中，我将只展示配置之间的主要区别。

---

开发模式

webpack.config.js

devtool: 'cheap-module-eval-source-map',
cache: true,
debug: true,

时间线 - 473 毫秒

生产模式

webpack.config.js

plugins: [
    'transform-react-remove-prop-types',
    'transform-react-constant-elements',
    'transform-react-inline-elements'
],
cache: false,
debug: false,
plugins: [
    // Search for equal or similar files and deduplicate them in the output
    // https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
    new webpack.optimize.DedupePlugin(),

    // Minimize all JavaScript output of chunks
    // https://github.com/mishoo/UglifyJS2#compressor-options
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            screw_ie8: true, 
            warnings: false,
        },
    }),

    // A plugin for a more aggressive chunk merging strategy
    // https://webpack.github.io/docs/list-of-   plugins.html#aggressivemergingplugin
    new webpack.optimize.AggressiveMergingPlugin(),
]

时间线 - 228 毫秒

---

如果您想从这个解释中深入分析webpack.config.js，您可以查看react-starter-kit 的源代码。

Answer 3

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

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

您应该决定初始渲染不需要应用程序的哪些部分。这些部分应该被移动到另一个块中并通过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
        );
    }
};

现在，所有仅在 Dashboard 上需要的模块都将被移动到一个单独的块中。

冗长的require.ensure 部分甚至可以通过将所有顶级组件（我在这里称它们为pages）移动到像pages 这样的专用文件夹来进行优化。然后你可以配置 webpack 使用bundle-loader 来异步加载这些东西：

// 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
};

如果你超级懒，只想引用相同的文件名而不手动创建pages-Object，你也可以使用require contexts：

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