0

如果我错了，请纠正我，但是 webpack 所做的是将所有文件捆绑为一个，然后将它们提供给客户端以减少请求。之后，客户端仍然需要加载该文件才能让您的应用程序运行，因此为了使其更快，代码拆分允许客户端按需加载应用程序的不同部分，对吗？

我不确定如何使用文档中的以下代码来做到这一点。所以如果我把下面的代码放在一个已经加载的文件中，第一个参数指的是依赖项，第二个指的是回调。这意味着我想对依赖项做的任何事情都必须进入回调，对吗？

require.ensure(["module-a", "module-b"], function() {
  var a = require("module-a");
  // ...
});
4

1 回答 1

2

代码拆分是 webpack 最引人注目的特性之一。它允许您将代码拆分为各种捆绑包，然后您可以按需加载，例如当用户导航到匹配的路线或来自用户的事件时。这允许更小的捆绑包，并允许您控制资源负载优先级

拆分应用程序和供应商代码 var webpack = require("webpack");

module.exports = {
  entry: {
    app: "./app.js",
    vendor: ["jquery", "underscore", ...],
  },
  output: {
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
  ]
};

这将从应用程序块中删除供应商块中的所有模块。bundle.js 现在将只包含您的应用程序代码，没有任何依赖项。这些在 vendor.bundle.js 中。

在您的 HTML 页面中，在 bundle.js 之前加载 vendor.bundle.js。

<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>

更多信息

反应代码拆分

于 2017-03-15T07:53:41.380 回答