何时在 Vue + webpack 中使用静态或动态资源答案

【问题标题】：When to use static or dynamic assests in Vue + webpack何时在 Vue + webpack 中使用静态或动态资源
【发布时间】：2018-10-08 04:20:27
【问题描述】：

我正在用 Vue 开发一个网页，我看到有两种方法可以寻址和保存图像或 css 文件。通过相对路径或从静态文件夹。

问题是，有什么区别？我什么时候应该优先选择一种方法或另一种方法？是否存在性能问题？

非常感谢，

【问题讨论】：

标签： webpack vuejs2

【解决方案1】：

有什么区别？

当您使用相对路径时，文件由 webpack 解析和处理。

例如，在<template> 标签中，您使用相对路径来寻址图像，如下所示：

<template>
<div>
    <img src="./images/cat.png" alt="cat">
</div>
</template>

将转换为模块依赖为：

createElement('img', {
attrs: {
    src: require('../images/cat.png') // this is now a module depency
}
})

在上面的示例中，正在处理的文件是一个扩展名为 .png 的图像文件。因此，为了让 webpack 知道所需的对象是文件并返回其公共 URL，vue cli 使用了开箱即用的 file-loader 和 url-loader。

在处理 static 目录中的资源时，webpack 不会处理文件并按原样复制。您需要使用绝对路径来引用该文件。例如/static/cat.png

是否存在性能问题？

当您使用相对路径时，文件由url-loader 处理。您可以在 build/webpack.base.conf.js 文件中找到它，如下所示：

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }

上面提到的limit 选项告诉url 加载器将文件内联为base 64 字符串。例如，如果您有

//main.js
const cat = require(../images/cat.png); // cat.png is less than 10000 bytes

它将被转换并内联到 main.js 文件中，而不是将图像文件复制到 dist 文件夹中：

//main.js
const cat = url("data:image/png;base64,iVBFfaGVVGfF...);

如果它是一个小文件并且小于 10000 字节，则浏览器不必单独向服务器查询图像数据，节省了往返，从而减少了对服务器的请求数。

但是如果文件大小超过 10000 kb，url-loader 会自动将作业交给 file-loader。

file-loader 允许您配置复制文件的位置以及如何命名。

我什么时候应该优先选择一种方法或另一种方法

当你不想让 webpack 处理你的资源时，使用 static 文件夹。但请记住使用绝对路径。

只需使用相对路径，将麻烦留给 webpack 是否内联或使用 file-loader 来复制/重命名文件，使用 version hashes 更适合缓存。

更多参考：

【讨论】：