静态资源的缓存

静态资源的缓存

1.tomcat上面的方式

  1. 在web.xml配置过滤器
  2.    <filter-mapping>
         <filter-name>springSecurityFilterChain</filter-name>
         <url-pattern>/*</url-pattern>
         </filter-mapping>
         <filter>
         <filter-name>CacheFilter</filter-name>
         <filter-class>com.hand.hap.winShare.utils.EasyCacheFilter</filter-class>
         <!-- 配置要缓存的web资源以及缓存时间,以小时为单位 -->
           <init-param>
           <param-name>css</param-name>
           <param-value>7</param-value>
          </init-param>
         <init-param>
           <param-name>jpg</param-name>
           <param-value>7</param-value>
         </init-param>
         <init-param>
           <param-name>js</param-name>
           <param-value>7</param-value>
         </init-param>
         <init-param>
           <param-name>png</param-name>
           <param-value>7</param-value>
         </init-param>
          <init-param>
           <param-name>woff</param-name>
           <param-value>7</param-value>
         </init-param>
          <init-param>
           <param-name>woff2</param-name>
           <param-value>7</param-value>
         </init-param>
          <init-param>
           <param-name>ttf</param-name>
           <param-value>7</param-value>
         </init-param>
         </filter>
        <!-- 配置要缓存的web资源的后缀-->
         <filter-mapping>
         <filter-name>CacheFilter</filter-name>
         <url-pattern>*.jpg</url-pattern>
         </filter-mapping>
    
         <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.css</url-pattern>
         </filter-mapping>
    
       <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.js</url-pattern>
       </filter-mapping>
        <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.png</url-pattern>
       </filter-mapping>
         <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.ttf</url-pattern>
       </filter-mapping>
        <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.woff</url-pattern>
       </filter-mapping>
        <filter-mapping>
           <filter-name>CacheFilter</filter-name>
           <url-pattern>*.woff2</url-pattern>
       </filter-mapping>
    

在写一个过滤器缓存数据
package com.hand.hap.winShare.utils;

	import java.io.IOException;
	
	import javax.servlet.Filter;
	import javax.servlet.FilterChain;
	import javax.servlet.FilterConfig;
	import javax.servlet.ServletException;
	import javax.servlet.ServletRequest;
	import javax.servlet.ServletResponse;
	import javax.servlet.http.HttpServletRequest;
	import javax.servlet.http.HttpServletResponse;
	/**
	 * 一个简单的使用静态缓存的过滤器
	 * @author 鲁竹红
	 */
	public class EasyCacheFilter implements Filter{
	    private FilterConfig filterConfig;
	    @Override
	    public void init(FilterConfig filterConfig) throws ServletException {
	        System.out.println("----过滤器初始化----");
	        this.filterConfig = filterConfig;
	    }
	
	    //过滤器功能在这里实现
	    @Override
	    public void doFilter(ServletRequest req, ServletResponse resp,
	            FilterChain chain) throws IOException, ServletException {
	        HttpServletRequest request = (HttpServletRequest) req;
	        HttpServletResponse response = (HttpServletResponse) resp;

    //1.获取用户想访问的资源
    String uri = request.getRequestURI(); 
    //2.得到用户想访问的资源的后缀名
    String ext = uri.substring(uri.lastIndexOf(".")+1); 
    //得到资源需要缓存的时间
    String time = filterConfig.getInitParameter(ext);
    if(time!=null){
        long t = Long.parseLong(time)*3600*1000*24;
        //设置浏览器缓存
        response.setDateHeader("expires", System.currentTimeMillis() + t);
        response.setHeader("Pragma","public");
        response.setHeader("Cache-Control","public");
    } 
    chain.doFilter(request, response);
}

@Override
public void destroy() {
    System.out.println("----过滤器销毁----");
}

}

2. Nginx上面的方式

详情看http://blog.youkuaiyun.com/xyr05288/article/details/68928403
location ~ .(gif|jpg|png|htm|html|css|js|flv|ico|swf)(.*) {
proxy_pass http://cluster; #如果没有缓存则通过proxy_pass转向请求
proxy_redirect off;
proxy_set_header Host $host;
proxy_cache cache_one;
proxy_cache_valid 200 302 1h; #对不同的HTTP状态码设置不同的缓存时间,h小时,d天数
proxy_cache_valid 301 1d;
proxy_cache_valid any 1m;
expires 30d;
}

### 使用 Webpack 实现静态资源缓存的最佳实践 #### 一、Webpack 静态资源缓存的核心理念 Webpack 是一种模块打包工具,它能够通过一系列插件和配置项优化前端项目的构建流程。为了实现高效的静态资源缓存,Webpack 提供了多种方法来确保生成的文件具有唯一的标识符(通常是哈希值)。这样做的目的是当文件内容发生改变时,新生成的文件名也随之变化,从而避免浏览器加载陈旧的缓存文件[^1]。 --- #### 二、具体实现方式 ##### 1. **为输出文件添加哈希值** 在 Webpack 的 `output` 配置中,可以通过占位符 `[hash]` 或 `[contenthash]` 动态注入文件内容对应的哈希值。这种做法可以有效区分不同版本的文件,防止缓存命中错误。 ```javascript module.exports = { output: { filename: 'js/[name].[contenthash].bundle.js', // JavaScript 文件带 contenthash chunkFilename: 'js/[name].[contenthash].chunk.js' // 动态导入的 Chunk 文件也带上 hash }, }; ``` 这里的 `[contenthash]` 只会根据文件的实际内容计算得出,只有当文件内容发生变化时才会触发新的哈希值生成[^2]。 --- ##### 2. **分离 CSS 文件并为其添加哈希值** 对于样式表文件,建议使用 `MiniCssExtractPlugin` 插件将其从 JavaScript 中提取出来,并同样附加上哈希值作为文件名的一部分。 ```javascript const MiniCssExtractPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css', // 输出的 CSS 文件名包含 contenthash }), ], }; ``` 此配置不仅实现了 CSS 文件的独立输出,还通过 `[contenthash]` 确保了缓存的有效性[^2]。 --- ##### 3. **压缩与优化静态资源** 为了让最终生成的文件体积更小、加载更快,可以引入一些常用的优化插件,例如 `TerserWebpackPlugin` 和 `OptimizeCSSAssetsPlugin`。它们分别用于压缩 JavaScript 和 CSS 资源。 ```javascript const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { optimization: { minimizer: [ new TerserPlugin(), new OptimizeCSSAssetsPlugin(), ], }, }; ``` 以上配置会在生产环境中自动运行,进一步提升性能表现。 --- ##### 4. **导出资源映射表** 有时可能需要记录所有生成的静态资源路径及其对应关系,这时可以借助 `webpack-manifest-plugin` 或类似的工具生成一份 JSON 文件。 ```javascript const WebpackManifestPlugin = require('webpack-manifest-plugin'); module.exports = { plugins: [ new WebpackManifestPlugin({ fileName: 'asset-manifest.json', // 自定义输出文件名 }), ], }; ``` 这份 JSON 文件可以帮助开发者更好地管理和调试项目中的静态资源[^3]。 --- #### 三、HTTP 缓存策略的补充 虽然 Webpack 主要负责生成带有哈希值的文件名,但在部署阶段还需要正确设置 HTTP 响应头以充分利用浏览器缓存机制。例如: - 对于 HTML 文件,推荐设置较短的缓存时间或者禁用缓存 (`Cache-Control: no-cache`)。 - 对于其他静态资源(如 JS、CSS、图片等),可设置较长的缓存时间(如一年)并通过 ETag 或 Last-Modified 进行校验。 典型配置如下: ```nginx location /static/ { expires 1y; # 设置最长缓存时间为 1 年 add_header Cache-Control "public"; } ``` 这样的组合可以让用户首次访问时快速下载所需资源,之后多次访问直接利用本地缓存,显著改善体验。 --- ### 总结 通过合理配置 Webpack 的输出规则、启用插件优化以及结合 HTTP 缓存策略,可以有效地实现静态资源的持久化缓存目标。这种方法不仅能减少不必要的网络请求次数,还能加快页面加载速度,进而提升整体用户体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值