何时在 Vue + webpack 中使用静态或动态资源 [英] When to use static or dynamic assests in Vue + webpack
问题描述
我正在 Vue 中开发一个网页，我看到有两种方法可以寻址和保存图像或 css 文件.通过相对路径或来自静态文件夹.
问题是，有什么区别?我什么时候应该优先选择一种方法或另一种方法?是否存在性能问题?
非常感谢，
有什么区别?
当您使用相对路径时，文件由 webpack 解析和处理.
例如在 标签中，您可以使用相对路径来寻址图像，如下所示:
<div><img src="./images/cat.png" alt="cat"></模板>
将被转换为模块依赖:
createElement('img', {属性:{src: require('../images/cat.png')//现在是一个模块依赖}})在上面的例子中，被处理的文件是一个带有 .png 扩展名的图像文件.因此，要让 webpack 知道所需的对象是文件并返回其公共 URL，vue cli 使用 file-loader 和 url-loader 开箱即用.
但是，当处理来自 static 目录的资产时，文件不会被 webpack 处理并按原样复制.您需要使用绝对路径来引用文件.例如 /static/cat.png
是否存在性能问题?
当您使用相对路径时，文件由 url-loader 处理.您可以在 build/webpack.base.conf.js 文件中找到它，如下所示:
<代码>{测试:/\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',选项: {限制:10000，名称:utils.assetsPath('img/[name].[hash:7].[ext]')}}上面提到的 limit 选项告诉 url 加载器将文件内联为 base 64 字符串.例如，如果您有
//main.jsconst cat = require(../images/cat.png);//cat.png 小于 10000 字节它将被转换并内联到 main.js 文件中，而不是将图像文件复制到 dist 文件夹中:
//main.jsconst cat = url("data:image/png;base64,iVBFfaGVVGfF...);如果是小文件且小于10000字节，浏览器就不必单独向服务器查询图像数据，节省了一次往返，从而减少了对服务器的请求次数.
但如果文件大小大于 10000 kb，url-loader 会自动将任务交给 file-loader.
file-loader 允许您配置复制文件的位置以及如何命名.
<块引用>我什么时候应该优先选择一种方法或另一种方法
当您不想让 webpack 处理您的资产时，请使用 static 文件夹.但请记住使用绝对路径.
只需使用相对路径并将麻烦留给 webpack 是否使用 版本哈希 更适合缓存.
更多参考:
I am developing a webpage in Vue, and I see there are two ways of addressing and saving images or css files. Either through a relative path or from the static folder.
The question is, what is the difference? When should i give preference to one method or the other? Are there performance issues?
Thanks a lot,
what is the difference?
when you use relative paths, the files are resolved and handled by webpack.
For example in <template> tag you use a relative path to address an image as follows:
<template>
<div>
<img src="./images/cat.png" alt="cat">
</div>
</template>
will be converted into a module dependency as:
createElement('img', {
attrs: {
src: require('../images/cat.png') // this is now a module depency
}
})
In the above example the file being handled is an image file with .png extension. So for webpack to know that the required object is as file and to return its public URL vue cli uses file-loader and url-loader out of the box.
Bu when handling assets from the static directory the files are not processed by webpack and copied as is. You need to use absolute paths to reference the file. For example /static/cat.png
Are there performance issues?
when you use relative paths the files are handled by url-loader. You can find it in build/webpack.base.conf.js file as follows:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
the limit option mentioned above tells the url loader to inline the file as a base 64 string. For example if you have
//main.js
const cat = require(../images/cat.png); // cat.png is less than 10000 bytes
it will be converted and inlined into the main.js file instead of copy the image file into the dist folder as:
//main.js
const cat = url("data:image/png;base64,iVBFfaGVVGfF...);
If it is a trivial file and smaller than 10000 bytes the browser doesn't have to query the server for the image data separately, saving a round trip thus reducing the number of requests to the server.
But if the file size is greter than 10000 kb url-loader will automatically hand the job to file-loader.
file-loader allows you to configure where to copy the file and how to name it.
When should i give preference to one method or the other
when you dont want webpack to handle your assets, use static folder. But keep in mind to use absolute paths.
Just use relative paths and leave the hassle to webpack whether to inline or use file-loader to copy/rename the file using version hashes which is better for caching .
For more refere to :
这篇关于何时在 Vue + webpack 中使用静态或动态资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
