使用 script 的 module 属性实现 es6 以上的兼容

几个月前看到了这篇文章 https://philipwalton.com/articles/deploying-es2015-code-in-production-today/,给了我很大的启发,本来是想使用 vue 来当实验对象的,但是在 vue-cli3 的测试版中就有了这个内容,所以这次使用 react 来实验, 现在 cra 中还未采用该方法;

作用:

借用 vue-cli3 中文档的几句话来说明下他的作用:

• 现代版的包会通过

  解决 safari 的重复加载问题

  基础的修改到此为止了,接下来运行指令 : npm run build 即可

  Build 注意点

  虽然现在有一个规范，模块的JS必须添加mjs后缀，但是如果这样做，你不能在本地构建后运行HTML文件，你必须在服务器上运行它，否则你报错:

  Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

  Build 结果

  大小比较:

  两个 main 版本只相差 async/await 和 polyfill 的转译:
  main.js :123k
  main.es5.js :220k

  两个 chunk 相差一个 async/await 的转译:
  es6:
  0.chunk.js : 362b = 0.29k
  es5:
  0.chunk.js : 2k

  这里借用开头文章的运行速度表格(他是没有加上 babel-polyfill 的):

  Version	Parse/eval time (individual runs)	Parse/eval time (avg)
  ES2015+ (main.mjs)	184ms, 164ms, 166ms	172ms
  ES5 (main.es5.js)	389ms, 351ms, 360ms	367ms

  结论

  算是一种生硬的实现方案, webpack 4的异步组件还未测试

  缺点是 webpack 重复生成,会减慢 build 的时间

  vue-cli3 已经有了这种方式,期待下 react-script 的官方指令

  解决 css 的问题,但是 es5 的代码大小不会打印出来

  这是修改实例: https://github.com/Grewer/react-add-module#chinese