Долгая загрузка с использованием модулей ES6 в Chrome

Мое приложение javascript предназначено для киоска и ориентировано только на браузер Chrome. Я использую Chrome версии 65. Я пытаюсь использовать модули ES6 без транспилятора, такого как Babel. Изначально мой код был:

в index.html:

<script src="js/index.js"></script>

index.js:

import Main from './classes/Main.js';

const init = () => {
  const app = new Main();
};

init();

Main.js:

export default class Main {
  constructor() {
  }
}

Первоначально я получил ошибку «Uncaught SyntaxError: Unexpected identifier» из строки 1 index.js. Затем на основе Импорт модуля ES6 дает Uncaught SyntaxError: Unexpected identifier Я добавил 'type =" module "' к тегу html:

<script type="module" src="js/index.js"></script>

Это действительно загрузилось, но моему браузеру требуется около 15 секунд, чтобы загрузить index.js и main.js в соответствии с профилировщиком сети. Что могло происходить?


javascript es6-modules es6-class
person interwebjill    schedule 03.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Итак, я провел несколько тестов на своем локальном компьютере. У меня есть простой сервер NodeJs, работающий со следующими тремя файлами:

index.html

<!doctype html>
<html>
<head>
  <title>es6 Module test</title>
  <script>
  console.time('load module');
  console.time('time until constructor called');
  </script>
  <script type="module" src="module.js"></script>
  <script>
  console.timeEnd('load module');
  </script>
</head>
<body>
  See console output.
</body>
</html>

module.js

import Main from './Main.js';

const init = () => {
  const app = new Main();
};

init();

и

Main.js

export default class Main {
  constructor() {
    console.timeEnd('time until constructor called');
  }
}

Запуск этого кода в Chrome 65 (на Mac)

Получаю следующий результат:

Запуск 1

load module: 0.141845703125ms
time until constructor called: 7.90087890625ms

Запуск 2

load module: 0.139892578125ms
time until constructor called: 6.5498046875ms

Запуск 3

load module: 0.160888671875ms
time until constructor called: 7.14404296875ms

Выполнить 4

load module: 0.297119140625ms
time until constructor called: 7.4228515625ms

Мое время загрузки варьировалось от 2 мс до 10 мс для каждого из трех файлов.

Я действительно не могу понять, почему ваше время намного медленнее. Но их быть не должно. Может быть, ваш сервер ломается и не может отвечать достаточно быстро?

Что можно проверить:

Что произойдет, если вы попытаетесь загрузить каждый файл из адресной строки? Они все еще загружаются вечно?

А как насчет другого сервера?

person Intervalia    schedule 04.04.2018
comment
Это хорошие предложения. Я попробую и доложу. - person interwebjill; 06.04.2018

arrow_upward
1
arrow_downward

У меня была такая же проблема при обслуживании моих файлов с использованием:

python -m SimpleHTTPServer

После перехода на python3 http.server проблема была решена:

python3 -m http.server
person spencer.sm    schedule 08.11.2018
comment
Здорово! странная ошибка. Я переключился на обслуживание с npx, и все работает нормально - person eltuza; 20.11.2018
comment
Для меня это не решило проблему. Фактически, это усугубило ситуацию (запуск через WSL в Windows 10), распространив его на файлы HTML. : \ - person Josh; 28.11.2018