问题标签 [code-splitting]

谁能向我解释如何通过 webpack 将此 es6 代码示例转换为代码可拆分块？我还没有找到任何其他好的例子。

我正在尝试利用 webpack 代码拆分。一切看起来都运行良好，webpack 正确地拆分了代码，依赖项，几乎和预期的一样。

除了我不能让它与热模块更换一起工作。

我成功加载 127.0.0.1:8009/main.js

但是 main.js 正在尝试加载 127.0.0.1:8001/assets/1.chunk.js

是否有意义？我肯定错过了什么。

我在 127.0.0.1:8001 运行我的节点服务器，在 127.0.0.1:8009 运行热中间件客户端

** main.js**

我的 Webpack 配置

简单的热服务器

与此处报告的问题类似：

当我使用 require.ensure 时，如何将查询字符串附加到块文件请求？

但是如果我必须发送一些只有在我调用时才知道的自定义参数怎么require.ensure办？例如，授权用户对服务器端给定块的 HTTP GET 请求的标识密钥？

我的路线是用 jsx 映射的。我使用 webpack 来打包东西，我想根据路由将输出的 js 文件分成块。

我试过 require.ensure 但 webpack 没有拆分任何东西。最后它只生成一个捆绑文件。我不确定我在这里做错了什么。我不想维护路线所在的 2 个地方。理想情况下，webpack 使用我已经定义的路由。

咕噜文件配置：

开发任务输出

我阅读了一些教程，但似乎这种情况并不常见。

我有以下 webpack 配置：

并lib/Polywrap.js具有以下代码，试图解释代码拆分：

我期待发出三个文件：Polywrap 和两个块。不幸的是，只有 Polywrap 与捆绑的所有内容一起发出：我所有的 js 文件../langs/都捆绑在一起。怎么了？

这是输出：

我正在尝试配置代码拆分

• 角度 1.5
• 打字稿 2.x
• 网络包 2

基本设置：我使用 vscode typescript 编译器将 ts 文件编译到与源文件夹具有相同文件夹结构的输出文件夹。

webpack 入口点是 testapp\testapp.js 其中包含

目前，pageonecomp.ts 也没有 pagetwocomp.ts 使用 myservice.ts 中的任何内容。当我编译并运行 webpack 2 时，它显示：

这正是我想要的，0.bundle.js 包含 MyService，testapp.bundle.js 包含 pageonecomp、pagetwocomp 和 testapp angular 模块。

但现在我想使用从 pageonecomp.ts 中的 myservice.ts 导出的 MyService 类型。为了使打字稿能够在 MyService 类上提供代码完成，我需要在 pageonecomp.ts 中导入 MyService 类型：

但是当我现在运行 webpack 时，代码拆分不再起作用，从输出中可以看出：

MyService 类现在包含在 testapp 包中，我不想要它......

有谁知道如何使它工作？目标是让 webpack 仅根据 import 语句创建我的包，以确定包中应该包含的内容，并让 System.import 指定应该在哪里进行代码拆分。

注意：目前我不需要动态加载额外的角度模块，我只是试图为多个入口点（多个小型水疗中心）制作捆绑包，以及在这些水疗中心之间共享的几个常见捆绑包。

我正在使用 react/react-router/webpack 堆栈，并在我的应用程序的不同页面之间进行动态路由，这意味着每个页面都按需求异步加载。一切都很好，但是当我部署一个新版本时，我当前没有获取所有页面的所有 Js 文件的活动用户将在尝试导航到他们尚未访问的另一个页面时卡住。

例子

假设我有一个代码拆分应用程序，其中包含以下 .js 生成的文件和 md5（用于缓存清除）：

用户访问我的主页，只得到main.123.js.

与此同时，我部署了一个具有不同 md5 的新版本（我在 profile.js 和 main.js 中都进行了更改）

用户尝试导航到配置文件页面，应用程序尝试获取profile.456.js但由于 profile.js 文件已被交换而出现错误，现在应用程序可以知道新文件名。

我想出了 2 个解决方案，但没有一个能真正解决问题

解决方案 1？ 始终在生产中保留 2 个版本。但这是一个滑坡，因为有时 2 个版本是不够的。即用户可以让他的选项卡打开几天，这样可以进行多次部署，直到他决定再次使用该应用程序。

解决方案 2？ 捕获 js 加载异常并向用户显示重新加载应用程序的消息。这个解决方案可以工作，但如果你问我，这是一个烦人的用户体验。

有没有人遇到过这种问题？有什么建议么？

编辑 - 解决方案： 我决定采用第二种方法（解决方案 2）。为了捕捉加载错误，我不得不将我的 webpack 升级到 webpack 2，因为 require.ensure 实现不支持捕捉 require 文件异常。使用 webpack 2，我可以使用System.import它支持错误处理。所以基本上我所做的是：

使用动态加载我的组件System.import：

}

并发现错误：

Webpack 有一个代码拆分功能（使用 require.ensure 或 System.import），它使我们能够动态加载我们的 js 文件。但我想知道是否有任何方法可以动态加载 css 文件？

这很奇怪，因为我只在一次加载我的 css 文件时动态加载我的 js 文件。

在我的项目中，我将我的 css 文件放在单独的条目中，并使用 extractTextPlugin 将它们编译为额外的 css 文件。并将它们加载到链接标签中。

这个问题看起来很熟悉，但相信我实际上不是！让我解释一下为什么。这与将函数保存在头文件中并包含和调用它无关。一个例子将清楚地说明我的查询，所以我们开始吧：我有一个如下所示的程序：

#include whatever_should_be_included

int main() {

whatever-1

whatever-2

whatever-3

. . .

}

所有这些都是程序中的代码，包括if条件、loops 和其他任何东西。我希望将那些“任何”保存在文件中，比如说纯文本文件或任何必要exten的扩展名，比如说“”作为扩展名，然后我想将它们保存为：

chunk-1.exten, chunk-2.exten, .... etc 文件将包含：whatever-1, whatever-2,... etc 代码行块，我的程序现在应该如下所示：

#include whatever_should_be_included #include those_chunks_maybe

int main(){

chunk-1.exten; //or whatever syntax necessary

chunk2.exten;

chunk-3.exten;

. . .

}

我是 C++ 和一般编程的初学者，所以请对我放轻松:) 一步一步的清晰答案和一些解释将不胜感激。

编辑-1：

1. 我正在使用 Ubuntu 16.04

2. 我的编译器是 g++，虽然我没有直接使用它，但我正在编译或者加载CERN 的 ROOT shell 中的程序，作为根宏。

编辑2：

当然，更好的方法是使用函数和标题，但这并不意味着我们不能探索将纯代码文本分块到不同文件并将它们包含在 main 中的功能！我想学习这个，但我不明白学习这个（无论多么枯燥）功能是错误的！为什么投反对票呢？这个问题是在害人吗？不就是好奇和促进知识吗？

我正在尝试使用rollup.js创建 2 个单独的构建：application.js和dependencies.js，分别包含我的应用程序代码和公共库代码（react、react-dom等）。

文档说我应该能够简单地使用externals: ['react', 'react-dom']它并让它工作 - 但是当我检查生成的包时，我仍然最终包含了两个库的完整主体。这是我的例子app.config.js，我称之为rollup -c app.config.js：

我究竟做错了什么？