Question

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

我不确定如何使用以下代码从文档中做到这一点。因此，如果我将下面的代码放在已经加载的文件中，则第一个参数引用依赖项，第二个参数引用回调。这意味着我想要对依赖项做什么必须进入回调，对吗？

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

Answer 1

代码拆分是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")
  ]
};

这将从app chunk中删除供应商块中的所有模块。现在，bundle.js将只包含您的应用程序代码，而不包含任何依赖项。它们位于vendor.bundle.js。

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

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

More Info

React code splitting

webpack代码拆分意味着什么？它是如何工作的？

1 个答案: