8. VueCLI处理HTML 和静态资源

LXLong
149 阅读2分钟

1. VueCLI处理HTML

1.1 public/index.html 文件

// vue_cli_3.0/public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。

image.png

image.png

// vue_cli_3.0/dist/index.html
<!doctype html>
<html lang="">
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico">
    <title>vue_cli_3.0</title>
    <script defer="defer" src="/js/chunk-vendors.ed944bab.js">
    </script>
    <script defer="defer" src="/js/app.7873da9b.js">
    </script>
    <link href="/css/app.2cf79ad6.css" rel="stylesheet">
  </head>
  
  <body>
    <noscript>
      <strong>We're sorry but vue_cli_3.0 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
  </body>

</html>

1.2 在public/index.html 文件中插入内容

因为 public/index.html 文件被用作模板，所以可以使用 lodash template 语法插入内容：

  • <%= VALUE %> 用来做不转义插值；
  • <%- VALUE %> 用来做 HTML 转义插值；
  • <% expression %> 用来描述 JavaScript 流程控制。

image.png 除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

更多内容查阅publicPath

1.3 <link rel="preload"> Preload 预加载

<link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。

默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。

这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('preload') 进行修改和删除。

1.4 <link rel="prefetch"> Prefetch

<link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。

这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除。

示例：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?.js$/)
      return options
    })
  }
}

当 prefetch 插件被禁用时，可以通过 webpack 的内联注释手动选定要提前获取的代码区块：

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。

Prefetch 链接将会消耗带宽。如果项目很大且有很多 async chunk，而用户主要使用的是对带宽较敏感的移动端，那么可能需要关掉 prefetch 链接并手动选择要提前获取的代码区块。

1.5 不生成index.html

当基于已有的后端使用 Vue CLI 时，可能不需要生成 index.html，这样生成的资源可以用于一个服务端渲染的页面。这时可以向 vue.config.js 加入下列代码：

// vue.config.js
module.exports = {
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 删除 HTML 相关的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}

然而不推荐这样做，因为：

  • 硬编码的文件名不利于实现高效率的缓存控制。
  • 硬编码的文件名也无法很好的进行 code-splitting (代码分段)，因为无法用变化的文件名生成额外的 JavaScript 文件。
  • 硬编码的文件名无法在现代模式下工作。

应该考虑换用 indexPath 选项将生成的 HTML 用作一个服务端框架的视图模板。

1.6 VueCLI 构建一个多页应用

不是每个项目都是一个单页应用。Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。

2. VueCLI 处理静态资源

静态资源可以通过两种方式进行处理：

  • 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
  • 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

1. 从相对路径导入静态资源

  • 在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require('./image.png')，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

image.png

在Vue CLI内部，我们通过 webpack 的 Assets Modules 配置，用版本哈希值和正确的公共基础路径来决定最终的文件路径，并将小于 8KiB 的资源内联，以减少 HTTP 请求的数量。

  • 可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将内联图片资源限制设置为 4KiB：
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .set('parser', {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4KiB
          }
        })
  }
}

2. 资源路径 URL 转换规则

  • 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

  • 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于项目文件系统中的目录结构进行解析。

  • 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着甚至可以引用 Node 模块中的资源：

    <img src="~some-npm-package/foo.png">

  • 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。 (仅作用于模版中)

3. public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。需要通过绝对路径来引用它们。

image.png

image.png

1.gif

注意我们推荐将资源作为你的模块依赖图的一部分（从相对路径）导入，这样它们会通过 webpack 的处理并获得如下好处：

  • 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
  • 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
  • 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当通过绝对路径引用它时，留意应用将会部署到哪里。如果项目没有部署在域名的根部，那么需要为你的 URL 配置 publicPath 前缀：

  • 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，需要通过 <%= BASE_URL %> 设置链接前缀：

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  • 在模板中，首先需要向你的组件传入基础 URL：

    data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

    然后：

    <img :src="`${publicPath}my-image.png`">

4. 选择何时使用 public 文件夹

  • 需要在构建输出中指定一个文件的名字。
  • 有上千个图片，需要动态引用它们的路径。
  • 有些库可能和 webpack 不兼容，这时除了将其用一个独立的 <script> 标签引入没有别的选择。
avatar
文章
阅读
粉丝