webpack代码分裂是什么意思?它是如何工作的？
webpack代码分裂是什么意思?它是如何工作的？
提问于 2017-03-15 05:41:39
如果我错了，请纠正我，但是webpack所做的是把你所有的文件打包成一个，然后提供给客户，以减少请求。之后，客户端仍然需要加载该文件才能使应用程序工作，因此为了使其更快，代码拆分允许客户端按需加载应用程序的不同部分，对吗？
我不知道如何使用来自文档的下面的代码来实现这一点。因此，如果我将下面的代码放在已经加载的文件中，则第一个参数引用依赖项，第二个参数引用回调。这意味着我想对依赖项做的任何事情都必须在回调中进行，对吗？
require.ensure(["module-a", "module-b"], function() {
var a = require("module-a");
// ...
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-15 07:53:41
码分裂是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页面中，在vendor.bundle.js之前加载bundle.js。
<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42801878
复制相关文章
相似问题
腾讯云开发者
