- egg 默认自动继承静态资源配置,在
public
文件夹- 通过
egg-static
链接:https://github.com/eggjs/egg-static模块实现。- 支持
koa-static-cache
链接:https://github.com/koajs/static-cache所有配置
1. 使用方法
在项目根目录下的app
文件夹下创建public
文件夹,默认该文件夹为静态文件存放目录
2. 如何访问静态资源
如下所示静态资源,可以通过
http://127.0.0.1:7001/public/images/logo.png
进行访问;
app/public
|--images
|--logo.png
3. 默认参数配置
egg-static support all configurations in koa-static-cache. and with default configurations below:
- prefix: '/public/'
访问静态化的url前缀
- dir: path.join(appInfo.baseDir, 'app/public')
需要设置静态化的目录
- dynamic: true
如果当前访问的静态资源没有缓存,则缓存静态文件,和
preload
配合使用;
- preload: false
项目启动的时候是否需要将静态资源缓存,和
dynamic
配合使用;
- maxAge: 31536000 in prod env, 0 in other envs
默认在
prod
环境缓存31536000秒
,其他环境0秒
(不缓存,防止修改代码后给自己挖坑);
- buffer: true in prod env, false in other envs
是否将缓存文件保存在内存中(默认生产环境会缓存,其他环境实时读取)
如:
我的配置如下:
// static files and cache files
config.static = {
// 静态化访问前缀,如:`http://127.0.0.1:7001/static/images/logo.png`
prefix: '/static',
dir: path.join(appInfo.baseDir, 'app/public'), // `String` or `Array:[dir1, dir2, ...]` 静态化目录,可以设置多个静态化目录
dynamic: true, // 如果当前访问的静态资源没有缓存,则缓存静态文件,和`preload`配合使用;
preload: false,
maxAge: 31536000, // in prod env, 0 in other envs
buffer: true, // in prod env, false in other envs
};
效果如下:
这是第一次访问的,可以看到status是200,缓存的文件目录是
public
,缓存有效期是31536000
秒;
当我第二次刷新的时候,状态就是304了,会一直读取缓存中的
main.js
,如果不强制刷新或者清除缓存或者重启项目等因素,则在31536000
秒内会一直读取缓存;
4. 其他选项配置
官网都有,再次偷懒了,
egg-static
支持static-cache
所有选项,以下部分参数上面已经提过了(egg-static
默认的参数),以下是直接复制的,相信前端童靴英语水平是可以看懂的,实在看不懂的点这里:https://fanyi.baidu.com/
static-cache
详见:https://github.com/koajs/static-cache
- dir (str) - the directory you wish to serve, priority than options.dir.
- options.dir (str) - the directory you wish to serve, default to process.cwd.
- options.maxAge (int) - cache control max age for the files, 0 by default.
- options.cacheControl (str) - optional cache control header. Overrides + options.maxAge.
- options.buffer (bool) - store the files in memory instead of streaming from the filesystem on each request.
- options.gzip (bool) - when request's accept-encoding include gzip, files will compressed by gzip.
- options.usePrecompiledGzip (bool) - try use gzip files, loaded from disk, like nginx gzip_static
- options.alias (obj) - object map of aliases. See below.
- options.prefix (str) - the url prefix you wish to add, default to ''.
- options.dynamic (bool) - dynamic load file which not cached on initialization.
- options.filter (function | array) - filter files at init dir, for example - skip non build (source) files. If array set - allow only listed files
- options.preload (bool) - caches the assets on initialization or not, default to true. always work together with options.dynamic.
- options.files (obj) - optional files object. See below.
files (obj) - optional files object. See below.
5. maxFiles
选项
egg-static
提供了一个static-cache
没有的参数,如下:
- maxFiles: the maximum value of cache items, only effective when dynamic is true, default is 1000.
注意事项
如果要使用项目中的静态文件,一定要注意官方默认在生产环境会将静态资源缓存,防止上线后坑了自己,官方静态资源处理的基本很好了,个人感觉只需要改
prefix
,dir
,maxAge
3个参数就好
prefix
可能需要跟运维小伙伴商量,防止nginx做代理出问题dir
静态文件存放的可能不只是public
一个目录maxAge
官方默认31536000
秒(一年)感觉有点长啊,可以适当修改
config.static = {
prefix: '/static',
dir: path.join(appInfo.baseDir, 'app/public'),
maxAge: 31536000,
};
相关原文
All static files in $baseDir/app/public can be visited with prefix /public, and all the files are lazy loaded.
- In non-production environment, assets won't be cached, your modification can take effect immediately.
- In production environment, egg-static will cache the assets after visited, you need to restart the process to update the assets.
- Dir default is $baseDir/app/public but you can also define multiple directory by use dir: [dir1, dir2, ...] and static server will use all these directories.