问题标签 [code-splitting]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
77 浏览

java - 拆分 GWT 代码的正确模式

我的 GWT 应用程序中有很多表单,每个表单可能只是在客户端单击程序中的图标时加载,但我在代码中的每个类中都使用了一些静态成员。
为了避免大量的初始化代码下载,我拆分了我的代码,如下所示:

根据初始条件加载form1和form2的非静态内容是正确的解决方案吗?
静态成员和内容呢?
基本形式会发生什么?基本代码是在加载第一个表单时只加载一次还是同时为它们加载一次?

0 投票
0 回答
613 浏览

java - 如何使用 GWT RPC 异步调用作为 GWT.runAsync RunAsyncCallback 分割点?

我们是 GWT RPC 的重度用户,并将其包装到一个框架中,使其更加可用。应用程序很大,并且会变得更大,因此我们需要更多地考虑拆分点。为我们的应用程序设置拆分点的一种非常自然的方式是围绕 GWT RPC 调用。从这个角度来看,它们已经是异步且安全的,并且它很好地分隔了我们应用程序的各个区域。

问题是是否有一种方法可以在 GWT RPC 调用周围通用地应用 GWT 拆分点,而无需开发人员在双异步调用中显式编码 - 特别是我们不想这样做:

我们尝试在我们的框架中添加 GWT.runAsync 包装(对所有 GWT RPC 调用都可行),但这只会拆分框架方法的小部分,它是通用的并且始终需要 - GWT(2.7.0)无法确定(通过编译时静态分析),这可以而且应该适用于对该方法的所有调用)。

有没有一种方法可以实现这一点,而无需开发人员必须专门在 runAsync 中额外包装他们的代码?

谢谢!

0 投票
0 回答
99 浏览

java - 带有初始加载顺序的代码拆分

我正在开发一个 GWT 项目,为了提高项目的处理速度,我们正在使用代码拆分技术来拆分我们的 js 文件。目前,我们研究了项目的初始加载顺序,并尝试在我们的项目中实现。当我们在项目 xml 文件中给出类的序列时,有一个类具有多个 runAsync 方法,即多个拆分点,然后我们得到一个错误多个 runAsync 调用被标记为类 com.client.MyHistoryListener

要问的问题:- 1.错误的原因?

  1. 在一个类中有多个 runAsync() 是否可以,它会分割类代码吗?

  2. 初始加载顺序的正确方法是什么以及如何管理它?

    公共无效 onModuleLoad() { GWT.runAsync(new RunAsyncCallback() {

    }

0 投票
6 回答
68085 浏览

javascript - 如何在 Redux 应用程序中动态加载 reducer 以进行代码拆分?

我要迁移到 Redux。

我的应用程序由很多部分(页面、组件)组成,所以我想创建许多减速器。Redux 示例表明我应该使用它combineReducers()来生成一个 reducer。

另外据我了解,Redux 应用程序应该有一个商店,它是在应用程序启动后创建的。创建商店时,我应该通过我的组合减速器。如果应用程序不是太大,这是有道理的。

但是如果我构建了多个 JavaScript 包怎么办?例如,应用程序的每个页面都有自己的捆绑包。我认为在这种情况下,一个组合减速器不好。我查看了 Redux 的源代码,发现了replaceReducer()函数。这似乎是我想要的。

我可以为我的应用程序的每个部分创建组合减速器,并replaceReducer()在我在应用程序的各个部分之间移动时使用。

这是一个好方法吗?

0 投票
1 回答
819 浏览

webpack - 无法正确解析 Webpack 附加块中的 CSS url 路径

我使用 webpack 的代码拆分功能来延迟加载我的 Angular 应用程序。我想在额外的块中放置一些 css 以让应用程序延迟加载这些样式,但我发现这些 css 中的 url 路径无法正确解析。请参阅下面的附件: css-url-path-in-additional-chunk 我有一个 h4 标签的背景样式,但无法正确解析。同时,我在这个页面上还有一个使用相同url的img标签,路径是硬编码在src属性中的,它可以正确显示。 url-in-html

======更新======

我的 Webpack 配置在这里:webpack.config.js,问题中提到的 styl 文件在这里:home-hero.styl,标头 HTML 文件在这里:header.jade

还有一点需要注意的是,当我右键单击第一张图片中的 url 链接并选择“在新链接中打开”时,我得到了完整的 url chrome-devtools://devtools/bundled/assets/images/logo.46e065707257b2930a699c7cdacd7e86.png,我认为这是无法显示图片的主要原因。

0 投票
0 回答
1007 浏览

javascript - 如何重用 webpack 供应商捆绑包

我假设我可以用 webpack 实现我想要做的事情,但仍然无法弄清楚。这是用例。

我有几个 Angular 应用程序(将在同一个浏览器窗口中加载),它们将重用完全相同的供应商包。目前 webpack 在每个应用程序中生成两个文件 app.[app_module_name].js 和 vendor.js。所以理论上我应该只能在 html 页面中包含一个 vendor.js 文件,然后加载几个应用程序模块。但是,这不起作用,因为供应商中 lib 的 webpack 内部引用彼此不同。

以下是我目前的配置。如果有人可以帮助我,那就太好了。

0 投票
2 回答
5428 浏览

javascript - webpack require.ensure 第一个参数使用

webpackrequire.ensure第一个参数的第一个参数有什么用?

https://webpack.github.io/docs/code-splitting.html

我试图让第一个参数填充或为空,如:

两者都在工作。那么第一个参数有什么用呢?

文档中还有一个require.include函数,我不明白这个函数的用例。谁能解释一下?

0 投票
1 回答
386 浏览

javascript - How does Webpack's code splitting work

I know little bit about webpack, but can not find a simple answer to my question. What does code splitting with Webpack mean?

Is it creating individual bundle js files for different routes and performing ajax operations for getting these js files when requested by the client.

Or is it performing async calls for getting other individual js files from server after showing the first requested page properly after the first hit?

Before I learn how to do, I would like to have an idea about what I am learning. Webpack docs doesn't help at all. It assumes you fully understand how webpack works.

0 投票
3 回答
1859 浏览

webpack - webpack 从应用中拆分节点模块

我的堆栈:NodeJS + react +... + gulp + webpack 2.1

在将 ES6 转换为普通 JS 时,我想将我的项目代码分成两个包:一个带有节点模块,另一个带有我的应用程序代码。如何在不明确指定要放入 node-module-bundle 的每个模块的情况下做到这一点。

Webpack 文档中,我看不到指定应该用作条目的目录的方法。有谁知道这是怎么做到的吗?

问候

0 投票
2 回答
1211 浏览

javascript - 如何使用 Webpack 延迟加载外部模块?

它可以externals使用全局变量,但是是否可以像该功能一样按需延迟加载外部 js 文件Code Splitting