何时在VUE WebPack中使用静态或动态评估

Question

我正在VUE中开发一个网页，我看到有两种解决图像或CSS文件的方法。通过相对路径或静态文件夹。

问题是，有什么区别？我什么时候应该优先考虑一种或另一种方法？有绩效问题吗？

非常感谢

Answer 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从包装盒中。

bu当从 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加载程序将文件作为基本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，将自动将作业交给文件加载程序。

文件添加程序允许您配置在哪里复制文件以及如何命名。

我何时应该优先使用一种方法或另一种方法

当您不希望WebPack处理您的资产时，请使用 static 文件夹。但是请记住使用绝对路径。

只需使用相对路径，然后将麻烦留给WebPack，无论是内联还是使用文件加载程序，使用版本哈希复制/重命名文件，这更适合缓存。

以获取更多裁判：

• 处理静态资产
• vue-loader资产URL handlung