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

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")
  ]
};

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

在您的 HTML 页面加载供应商。bundle.js 在 bundle.js 之前。

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

More Info

React code splitting

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

What does webpack code splitting mean and how does it work?

javascript

webpack

code-splitting