Question

我的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() {
  }
}

最初我收到了错误＆＃34; Uncaught SyntaxError：意外的标识符＆＃34;来自index.js第1行。然后基于ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"我添加了＆＃39; type =＆＃34; module＆＃34;＆＃39;到html标签：

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

这确实加载了，但根据网络分析器，我的浏览器需要15秒才能加载index.js和main.js。会发生什么事？

Answer 1

所以我在本地盒子上运行了一些测试。我有一个简单的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毫秒之间。

我真的不知道为什么你的时间会慢得多。但他们不应该。也许你的服务器受到了重创，无法快速响应？

可以检查的事项：

如果您尝试从地址栏下载每个文件会怎样？他们还要永远下载吗？

在另一台服务器上怎么样？

Answer 2

使用以下文件提供文件时，我遇到了同样的问题

python -m SimpleHTTPServer

改为使用python3 http.server后，它解决了问题：

python3 -m http.server

使用Chrome中的ES6模块长时间加载

2 个答案: