传统mvc项目，前后端不分离项目让静态资源走cdn

       静态资源走cdn，能提升网站的响应速度，节约资源。在现在纯前端项目上，可以让整个项目静态资源走cdn，nginx代理跟后端交互，那前后端未分离的项目，怎么让静态资源走cdn呢？

       先说下springboot+thymeleaf的项目，springboot框架自带VersionResourceResolver类，该类是处理静态资源版本控制的一个类，主要用于实现资源缓存 busting。当浏览器请求静态资源时，该类可以根据配置的版本策略（如ContentVersionStrategy）生成带有版本信息的URL，使得每次资源内容更新后，其URL也随之变化。这样可以避免浏览器使用过期的缓存资源，确保用户始终获取到最新版本的静态文件。所以springboot+thymeleaf的项目是现成的

       再介绍下eggjs+nunjuck的项目。eggjs+nunjuck项目并没有类似spring框架的VersionResourceResolver这种类，所以需要自己去实现。

       为了节省流量成本，静态资源采用的浏览器缓存。浏览器缓存相关知识可参考之前的文章：浏览器缓存之http缓存和service worker-CSDN博客

       既然用浏览器缓存了，怎么保证用户看到的内容都是最新的？即静态内容更新后，浏览器怎么知道静态资源更新了？

       更改静态文件后的版本号

利用gulp打包

          gulp.src 读取需要操作的文件

          gulp-rev把静态文件名改成hash的形式

          gulp.dest将写入文件的输出目录的路径

          rev.manifest()生成源文件和添加hash后文件的映射表

          gulp-rev-collector根据rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径

         真正实现

          1、gulp读取css下所有的css文件流，通过rev，为读取的流中的css的静态文件名改成hash的形式，通过dest定义要生成的文件的路径，通过rev.manifest()生成源文件和添加hash后文件的映射表

          2、gulp读取js下所有的js文件流，通过rev，为读取的流中的js的静态文件名改成hash的形式，通过dest定义要生成的文件的路径，通过rev.manifest()生成源文件和添加hash后文件的映射表

         3、 gulp-rev-collector根据rev生成的manifest.json文件中的映射, 去替换文件名称, 也可以替换路径

          由此可知gulp拥有全流程的解决方案

          gulp.task('css',gulp.series(['revImg',],function(){
              return gulp.src(['./src/main/node/app/public/image/*.json', './src/main/node/app/public/css/**/*.css'])
                         .pipe(revCollector()) // 根据对应的json 替换 所有css 内的图片
                         .pipe(rev())
                         .pipe(minifyCss()) // 压缩css
                         .pipe(gulp.dest('./src/main/node/app/public/css/'))
                         .pipe(rev.manifest())
                         .pipe(gulp.dest('./src/main/node/app/public/css/'))
              })
            )