Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • assets和static的区别

assets和static的区别

1. assets和static的区别

  • assets:在项目编译过程中,会被webpack处理,文件名会根据内容使用contenthash进行版本管理,在生产环境下会对资源进行压缩,同时可以通过相对路径进行引用,被webpack处理的文件都将被编译到指定的dist目录中。
  • static:不会被webpack处理,一般用于存放第三方库、插件等静态资源,通过绝对路径进行引用,在项目编译过程中,文件名会保持不变,不会被压缩,也不会被版本管理,直接复制到dist目录中。

2. 使用场景

  • assets:用于存放项目中需要被webpack处理的资源文件,如图片、字体、样式文件等,这些文件在项目编译过程中会被处理,如压缩、版本管理等。
  • static:用于存放项目中不需要被webpack处理的资源文件,如第三方库、插件等静态资源,这些文件在项目编译过程中会被直接复制到dist目录中,不会被处理。

3. 总结

  • assets和static都是用于存放静态资源文件,但它们的处理方式不同。assets会被webpack处理,而static不会被处理。 将图片等未处理的文件放在assets中,打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中,因为这些文件已经经过处理了。
Edit this page
最近更新: 2025/12/2 01:46
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人