首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >webpack代码分裂是什么意思?它是如何工作的?

webpack代码分裂是什么意思?它是如何工作的?
EN

Stack Overflow用户
提问于 2017-03-15 05:41:39
回答 1查看 99关注 0票数 0

如果我错了,请纠正我,但是webpack所做的是把你所有的文件打包成一个,然后提供给客户,以减少请求。之后,客户端仍然需要加载该文件才能使应用程序工作,因此为了使其更快,代码拆分允许客户端按需加载应用程序的不同部分,对吗?

我不知道如何使用来自文档的下面的代码来实现这一点。因此,如果我将下面的代码放在已经加载的文件中,则第一个参数引用依赖项,第二个参数引用回调。这意味着我想对依赖项做的任何事情都必须在回调中进行,对吗?

代码语言:javascript
代码运行次数:0
运行
复制
require.ensure(["module-a", "module-b"], function() {
  var a = require("module-a");
  // ...
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-15 07:53:41

码分裂是webpack最引人注目的特点之一。它允许您将代码分成不同的包,然后您可以根据需要加载这些包--例如,当用户导航到匹配的路由时,或者在用户的事件上。这允许使用较小的包,并允许您控制资源负载优先级。

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

代码语言:javascript
代码运行次数:0
运行
复制
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。

代码语言:javascript
代码运行次数:0
运行
复制
<script src="vendor.bundle.js"></script>
<script src="bundle.js"></script>

更多信息

反应码分裂

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42801878

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档