ERR_CONTENT_LENGTH_MISMATCH 在 browsersync.reload

Question

捆绑完成后，我正在使用 browsersync.reload()。第一次，它运行良好，但在 App 变大后，网页无法加载 JavaScript 重新加载时显示此消息：

GET http://localhost:4000/js/bundle.js net::ERR_CONTENT_LENGTH_MISMATCH

这是我的 gulpfile.js 代码：

function serve() {
    let serverStarted = false;

    nodemon({ script: 'server.js' })
    .on('start', () => {
        if(!serverStarted) {
            serverStarted = true;

            browserSync.init(null, {
                proxy: `localhost:${config.port || 3000}`,
                port: config.proxyPort || 4000
            });

            gulp.watch(`${SRC_DIR}/html/**`, buildHtml);
            gulp.watch(`${SRC_DIR}/scss/**`, buildScss);

            gulp.watch(`${BUILD_DIR}/html/index.html`).on('change', browserSync.reload);

            // return empty stream
            return gutil.noop();    
        }
    });
}

我正在使用 browser-sync 快递，所以我使用了代理。下面的代码是脚本的捆绑部分：

function buildJs() {
    const b = persistify()
    .add(`${SRC_DIR}/js/index.js`)
    .on('update', bundle)
    .on('log', gutil.log)

    function bundle() {
        let stream = b.bundle()
        .on('error', swallowError)
        .on('end', () => {
            gutil.log(`Building JS:bundle done.`);
            browserSync.reload();
        })
        .pipe(source('bundle.js'));

        return stream.pipe(gulp.dest(`${BUILD_DIR}/js`));
    }

    return bundle();
}

我正在使用 persistify 进行快速构建，它与 watchify 一起使用，所以我没有使用 watch。如您所见，'end' 事件在捆绑完成时触发，我调用了 browerSync.reload 来重新加载页面。

重新加载本身没有问题，但加载失败 JavaScript 正如我标题所说。

持久化触发的结束事件这么早吗？还是 express/browser-sync 的某种问题？

我只能猜测结束事件已触发但流仍在写入文件，因此实际文件大小不正确并拒绝获取。

我故意在 browsersync.reload() 之前延迟了一些，它有效，但我不想这样做。

有什么我遗漏的吗？还是我做错了方法？任何建议将不胜感激。

Answer 1

我在浏览器同步开始后通过执行转译 JavaScript 解决了这个问题。

我仍然不知道为什么会这样，但似乎脚本正在转换并且浏览器在它仍在工作时尝试访问。

ERR_CONTENT_LENGTH_MISMATCH 在 browsersync.reload

ERR_CONTENT_LENGTH_MISMATCH on browsersync.reload

javascript

browserify

gulp

browser-sync