小编Eve*_*tss的帖子

在Webpack之前,我总是依赖于以下模式来进行"缓存清除":

<script src="foo.js?cacheBust=12345" />

哪个12345是服务器在每个构建时为我生成的标记(它可能是Git哈希,尽管在我的情况下它不是).

有了Webpack,我现在有两个文件:build.js和chunk.1.js.由于我使用正常的脚本标记带来第一个,我可以使用上面的模式:

<script src="build.js?cacheBust=12345" />

但是,此时build.js会进行提取chunk.1.js,并且当它执行时,它不包括缓存无效的后缀.

我想让Webpack自动附加?cacheBust=12345,但我不知道12345构建时的部分,所以我不能把它包含在我的webpack.config.相反,我必须等到HTML页面被评估,此时我从服务器获取令牌.

所以,我的问题是,有没有办法让Webpack查看用于获取初始文件的参数(例如.?cacheBust=12345)并在获取其他文件时附加相同的参数？

我正在尝试调试HTTP/1.1和HTTP/2之间的差异.是否有可能禁用chrome或chrome中的HTTP/2？我在chrome 56中找不到这个选项标志.我试过带标志的--disable-http2铬58 :

./Chromium.app/Contents/MacOS/Chromium --disable-http2

但使用此标志后仍然使用HTTP/2协议提供内容:

在webpack 1中,docs是 webpack 2将System.import()用于动态需求的声明:

幸运的是,有一个JavaScript API"加载器"规范被编写来处理动态用例:( System.load或 System.import).此API将与上述require变体等效 .

在此期间,网络上的所有内容都是使用它的例子System.import().

在发布webpack 2之前,作者决定System.import()改为import():

添加import()为Code Splitting构造.它应该 System.import在可能的情况下使用.System.import将在webpack 2发布中弃用(在webpack 3中删除),因为根据规范它的行为是不正确的.

这import()基于tc39/proposal-dynamic-import规范,您可以在此处阅读更多为何进行此更改的原因.

有人可以解释System.import()和之间的区别import()吗？

尽管名称不同,但用法看起来相同:

import(modulePath)
  .then(module => module.default())
  .catch(/* ... */);

System.import(modulePath)
  .then(module => module.default())
  .catch(/* ... */);

但是在weback 2中,doc是:" System.import()根据规范行为是不正确的" - 所以它表明System.import()和之间存在差异import().

在同构呈现的页面图像可以在主script.js文件之前下载.因此,可以在react注册onLoad事件之前加载图像- 从不触发此事件.

script.js

constructor(props) {
    super(props);
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
}

handleImageLoaded() {
    console.log('image loaded');
} 

render() {
    return (
        <img src='image.jpg' onLoad={this.handleImageLoaded} />
    );
}

场景1 - image.jpg大于script.js

在这种情况下一切正常.在最终加载图像之前注册事件,因此在控制台中是image loaded消息.

场景2 - image.jpg小于script.js

在这种情况下,您可以看到帖子开头描述的问题.onLoad事件未触发.

题

为了onLoad在方案2中触发事件,我该怎么办？

编辑:Soviut答案实施

要检测渲染时图像是否准备好,您应该检查complete纯javascript img对象上的属性:

constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
    this.image = React.createRef();
}

componentDidMount() {
    const img …

我试图loadEventEnd在控制台中获取时间.您可以通过性能计时2 API或性能计时API来完成.通过这个计算,我得到了相同的结果:

performance.getEntriesByType("navigation")[0].loadEventEnd
// 483.915
chrome.loadTimes().finishLoadTime * 1000 - chrome.loadTimes().startLoadTime * 1000 
// 484
performance.timing.loadEventEnd - performance.timing.navigationStart
// 484

但是在devtools的Timeline选项卡中,我得到结果510毫秒.这张图中显示了不同之处:

在其他站点上会出现此问题:在控制台中,我总是比"时间线"选项卡中的时间短.有人可以解释这种差异吗？哪一次是真的？

我正在编写简单的算法,用于比较整数的两个向量a1和a2是否为字谜(它们包含不同顺序的相同元素).例如{2,3,1}和{3,2,1}是字谜,{1,2,2}和{2,1,1}不是.

这是我的算法(非常简单):

1. for ( i = 1; i <= a1.length; i++ )
 1.1. j = i
 1.2. while ( a1[i] != a2[j] )
  1.2.1. if ( j >= a1.length )
   1.2.1.1. return false
  1.2.2. j++
 1.3. tmp = a2[j]
 1.4. a2[j] = a2[i]
 1.5. a2[i] = tmp
2. return true

表示比较两个字谜:

让我们考虑运行时间的函数取决于矢量大小T(n),当它们是两种情况下的字谜时:pesimistic和average.

• 悲观

当向量没有重复元素且向量处于相反顺序时发生.

c3,c4和c6的多重性是:

因此,运行时间的最终函数是:

等式(3)可以用更简单的形式编写:

• 平均

当向量没有重复元素且向量是随机顺序时发生.这里的关键假设是:平均而言,我们发现a1中的相应元素是未分类a2的一半(c3,c4和c6中的j/2).

c3,c4和c6的多重性是:

平均运行时间的最终功能是:

写得更简单:

以下是我的最终结论和问题:

等式(8)中的b2比等式(4)中的a2小两倍

我是对的(9)？

我认为在矢量大小函数中绘制算法的运行时间可以证明方程(9),但它不是:

在图上我们可以看到比率a2/b2是1.11,而不是在等式(9)中,其中是2.上图中的比率远离预测.这是为什么？

我遇到了fbevents.js的问题,我不知道为什么会加载我的页面,我也没有将它导入任何地方,也没有把它放在引用它的脚本标签中.

我的页面图片:

你们认为这可能是什么问题？

在同构反应应用程序中我myModule应该在节点和浏览器环境中表现不同.我想配置此分割点的package.json用于myModule:

package.json

{
  "private": true,
  "name": "myModule",
  "main": "./myModule.server.js",
  "browser": "./myModule.client.js"
}

file structure

??? myModule
?   ??? myModule.client.js
?   ??? myModule.server.js
?   ??? package.json
? 
??? browser.js
??? server.js

因此,当我myModule在节点中使用时,我应该只得到myModule.server.js:

server.js

import myModule from './myModule';
myModule(); // invoke myModule.server.js

在浏览器端应该只使用 myModule.client.js以下内容构建bundle:

browser.js

import myModule from './myModule';
myModule(); // invoke myModule.client.js

react-starter-kit使用这种方法,但我无法弄清楚这个配置的定义.

动机

1. package.json 做这种分裂是很好的语义点.
2. 客户端包仅包含myModule.client.js.

已知的解决方案 - 不是我的答案 …

使用以下命令检查主存储库中子模块的状态:

git submodule status

产生输出(没有关于分支的明确信息):

491e03096e2234dab9a9533da714fb6eff5dcaa7 vendor/submodule1 (v1.51.0-560-g491e030)
8bccab48338219e73c3118ad71c8c98fbd32a4be vendor/submodule2 (v1.32.0-516-g8bccab4)

是否可以检查子模块上的当前分支,而无需:

cd vendor/submodule1
git status
cd ../submodule2
git status

？

此命令不起作用:

git submodule status -b

让我们考虑一下在构建期间获取分页的前 3 页的示例：

app/listing-params/[page]/page.jsx

const getData = async (page) =>\n  new Promise((resolve) => {\n    setTimeout(() => {\n      resolve(`You are on page ${page}`);\n    }, 1000);\n  });\n\nexport async function generateStaticParams() {\n  return [{ page: \'1\' }, { page: \'2\' }, { page: \'3\' }];\n}\n\nexport default async function Page({ params }) {\n  const data = await getData(params.page);\n\n  return <div>{data}</div>;\n}\n

这将生成路线：

Route (app)                                Size     First Load JS\n\xe2\x94\x9c \xe2\x97\x8f /listing-params/[page]                 145 B          79.5 kB\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/1\n\xe2\x94\x9c   \xe2\x94\x9c /listing-params/2\n\xe2\x94\x94   \xe2\x94\x94 /listing-params/3\n\n+ First …