public/index.html是个html模板，他被webpack-html-plugin插件处理，然后输出到dist目录

处理内容：

  1. 注入resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时)
  2. 注入JavaScript 和 CSS 文件的资源链接

模板语法

语法：html-webpack-plugin
另外vue-cli会注入vue-cli环境变量，常见的：

  • NODE_ENV<br />``"development"、"production" 或 "test" 中的一个
  • BASE_URL
    webpack配置项 publicPath 值

    preload 和 prefetch

    preload和prefetch是高版本浏览器才支持的H5特性

vue-cli会自动使用preload和prefetch

  • 为所有初始化渲染需要的资源自动生成 <link rel="preload"> 标签
  • 为所有作为 async chunk （比如router import()导入的组件）资源自动生成 prefetch 属性

    preload

    预加载，优先加载的资源（这些资源在页面加载完需要立即使用的，在渲染时即进行下载）
  1. /**css 预加载**/
  2. <link rel="preload" href="xx.css" as="style">
  3. /**js 预加载**/
  4. <link rel="preload" href="xx.js" as="script">
  5. /**其他**/
  6. // ...

例：

  1. <head>
  2.   <meta charset="utf-8">
  3.   <title>JS and CSS preload example</title>
  5.   <link rel="preload" href="style.css" as="style"> // 预加载
  6.   <link rel="preload" href="main.js" as="script">
  8.   <link rel="stylesheet" href="style.css"> // 正常使用
  9. </head>
  11. <body>
  12.   <h1>bouncing balls</h1>
  13.   <canvas></canvas>
  15.   <script src="main.js"></script>
  16. </body>

prefetch

空闲预加载，优先级低，在浏览器空闲时预加载一些资源（方便后续页面使用）

  1. <link rel="prefetch" href="/images/big.jpeg">