友情提示：推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。 相关阅读：前端工程化 | 定制专属提速“外挂”（上）
必须配置SpringMvc对访问静态资源的支持，idea默认就是在main/webapp 下的文件路径，要在web-info同级的resource文件下放置，JSP中
1、动静分离：将 Web 应用程序中静态和动态的内容分别放在不同的 Web 服务器上，有针对性的处理动态和静态内容，从而达到性能的提升。
参考：https://www.cnblogs.com/zfding/p/11766062.html
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源，所以在web.xml中配置DispatcherServlet的请求映射，往往使用 *.do 、 * .xhtml等方式。这就决定了请求URL必须是一个带后缀的URL，而无法采用真正的REST风格的URL
现代互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到 CDN 节点上，网页中引用的资源也会变成对应的部署路径：
到目前为止，我们都是在处理动态资源，也就是 Go 代码实现的响应。HTTP 服务器除了处理动态资源之外，还应该具备处理静态资源的能力，比如 HTML、CSS、JavaScript、图片都属于静态资源的范畴。
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片，而在打包时保留这些静态资源，直接打包到指定文件夹中。此时就需要使用到copy-webpack-plugin这个插件了。
当我们访问jsp时，访问路径：http://localhost:8080/ajax-request.jsp
当使用Spring Boot来开发一个完整的系统时，我们往往需要用到前端页面，这就不可或缺地需要访问到静态资源，比如图片、css、js等文件。
示例 <html> <head> <link href='a.css' type='text/css'/> <script src="b.js"></script> ... </head> ... </html> 这个页面引用了2个静态资源： a.css、b.js 随着产品的不断发展，简单的静态资源更新也就不再简单 阶段一 产品初期，访问量不大，网络带宽充足，每次用户访问都重新加载静态资源也很快 这种情况下，静态资源的升级就非常简单，用新的文件直接覆盖线上文件即可 阶段二
上一篇《前端福音：Serverless 和 SSR 的天作之合》，详细介绍了 SSR 相关知识，同时也提到了 Serverless 给 SSR 方案带来的福利。但它只是将 Next.js 应用部署到 Serverless 服务上而已，并不适合实际生产业务。为此本篇专门针对 Next.js 的 SSR 方案进行了探索和优化，一步一步带大家了解，如何基于 Serverless 架构部署一个实际的线上业务。
https://github.com/ChenShenhai/koa2-note/blob/master/demo/static-server/open in new window
前端 性能优化 可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level
构建的核心是资源管理。简单说，构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作，最终产出可以直接上线或者可供后端工程师的资源。 构建可以划分为纯前端构建和前后端协作构建。 这两个不是专业术语，如果你有更合适的称谓，欢迎指正。 所谓纯前端构建，就是说不涉及后端模板的构建，经过构建之后的前端代码可以直接上线。这种情形下大多是数据驱动UI的web应用，模板只负责提供空白的容器和基础的静态资源，UI的文档结构交由前端JavaScript实现。这个过程可以使用一些框架，比如近期较流行的React
目录 SpringMVC的编码过滤器配置 浏览器服务器交互的编码格式介绍 问题: 解决 SpringMVC的编码过滤器配置 SpringMVC的静态资源放行 SpringMVC的Dispatcher的拦截范围问题 问题: 解决: SpringMVC的静态资源放行配置 SpringMVC的编码过滤器配置 浏览器服务器交互的编码格式介绍 问题: 在浏览器和服务器的数据交互流程中，处理英文数据以外还有中文数据。 浏览器发起的请求数据中包含中文，服务器响应的数据包含中文。而浏览器 默认的编码格式为iso
springboot 默认的静态资源的值有四个：Default: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端web优化也是非常重要的。 下面说说几种常见的优化措施。 1、HTML CSS JS位置 一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行就要放到页面最底部，以免在页面展示之前因JS过多加载而影响页面渲染速度。 2、引用文件位置 有一些插件需要引用到远程的图片、CSS、JS、图标等，如果远程的资源连接网速
静态资源优化 这方面主要是减少静态资源的加载时间 减少http请求的数量和时间上来考虑 合并压缩css、js文件，制作雪碧图 压缩图片：减少http的请求次数，节省网络请求时间 静态资源cdn分发：客户端可以通过最佳的网络链路加载静态资源 静态资源缓存机制，从而减少不必要的请求 减少DNS的搜索时间 这个在前端处理的少一些 接口访问优化 这个主要还是要从服务端入手，node必不可少 首屏采用服务端渲染 可以使用node做到前后处理都用js语言 使用node来实现基于代理服务的接口合并方案 从而也减少了htt
返回非页面的数据，必须在方法或者类上加 @ResponseBody，同时 我们返回的类型 springmvc会自动解析成对应的格式，不需要我们进行手动指定
一个页面的加载快慢，最重要的指标就是静态资源的加载速度了吧。你拼了命得对代码进行优化几十ms，结果静态资源一个不爽就给你耗了几百ms。
1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。 2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。
例如同一个域名 CDN 服务器上的 a.js，b.js，c.js 就可以按如下方式在一个请求中下载：
在进行对 SpringMVC 配置时，通常我们会配置一个 dispatcherServlet 用于处理对应的 URL。
不知大家是否注意了一个问题，我们将 web 项目发布到 tomcat 后，可以直接访问 jsp 后缀的文件，或者直接访问项目中的静态资源（js/css/图片之类的文件），只要路径写的没有问题，都可以正常在浏览器中显示，大家是否思考过，是谁在处理这个请求呢？
注意：使用Thymeleaf的引用方法，只有运行项目才有效。普通打开HTML无法解析。
当然，用别人的 CDN 都是不保险的，所以建议在 CDN 读取失败的时候从自己服务器提供
鉴于有人留言说想要学习SpringBoot相关的知识，我这里打算写一个SpringBoot系列的相关博文，目标呢是想让看了这一系列博文的同学呢，能够对SpringBoot略窥门径，这一系列的博文初步都定下来包括SpringBoot介绍、入门、配置、日志相关、web开发、数据访问、结合docker、缓存、消息队列、检索、任务安全、分布式等等一系列的博文，工作量很大，是个漫长的过程，每一步我都尽量详细，配上截图说明，也希望对看的同学真的有用。
先找到这个类：WebMvcAutoConfiguration，在这个jar包里面，还是自动配置
去看webapps里工程目录下，index.html文件是有的，见鬼了，是哪儿出了问题？
我们都知道了Nginx在高并发场景和处理静态资源是非常高性能的，但是在实际项目中除了静态资源还有就是后台业务代码模块，一般后台业务都会被部署在Tomcat，weblogic或者是websphere等web服务器上。那么如何使用Nginx接收用户的请求并把请求转发到后台web服务器？
我们的网站简单来说分为 2 种数据资源，一种是动态的数据，即 PHP 等程序语言实时吐出来的数据，在网页内容上主要是 HTML 代码，另一种则是静态资源，比如图片、css、js、视频等（当然，图片等资源也可能是实时动态生成的，比如 PHP 缩略图，这里就不展开讨论了）。
nginx中经常会因为业务需求，需要通过location配置不同的子目录，访问不同的后端，如下
主要是nginx处理静态页面的效率远高于tomcat的处理能力，如果tomcat的请求量为1000次，则nginx的请求量为6000次，tomcat每秒的吞吐量为0.6M，nginx的每秒吞吐量为3.6M，可以说，nginx处理静态资源的能力是tomcat处理能力的6倍，优势可见一斑。
在我们开发Web应用的时候，会用到大量的js、css、image、html等静态资源资源。
很久没写文章了，博客已经长草了，今天挤点时间分享一些小干货，也是回应一下不少站长朋友的留言问题。 有不少站长朋友问张戈博客的静态文件为啥是另外一个域名？有啥好处？如何实现？ 其实这算是一种动静分离的做
可以去https://www.webjars.org/获取各种静态资源的maven格式的代码
Google出品，必属精品了，谷歌的公共CDN公共库应该是 最强大的了，像其中的前卫的各种代码类库和Google Web Font 字体库，但国内被墙
自从博客项目上线以来，经常会有用到我博客项目的人问我后台编辑博文为啥没有编辑器，博主是怎么编辑博文的？我每次的回答基本都是说随便找个本地的 markdown 编辑器把文章写好然后复制到后台即可。而我自己也一直是这样做的，但是今天这篇文章就不同，这篇文章使用的是我刚上线的一个在线 markdown 编辑器写的，同样是写完复制到后台。
腾讯云健康看板（Tencent Cloud Health Dashborad，下面简称：腾讯云status page ），采用了Next.js全栈框架实现SSR+SSG。
前后端分离这个问题其实松哥和大家聊过很多了，上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览（喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了），然后群里就有小伙伴想让松哥来聊聊如何结合 Nginx 来部署前后端分离项目？今天我们就来聊一聊这个话题。
1.在jfinal项目中 因为一直使用的jfinal，没感觉路径问题。 举个栗子，项目名字叫做test.访问一个Controller的映射为/user/add.这样，在浏览器地址栏直接：localhost:8080/user/add就可以直接访问到add方法了。当然，这样需要通过配置不同的端口来发布不同的项目，不然肯定冲突了。端口指定项目的路径。 比如： <Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="t
阅读量: 57 动静分离 为了加快网站的解析速度，可以把动态页面和静态页面由不同的服务器来解析，加快解析速度。降低原来单个服务器的压力。 动态页面与静态页面区别 静态资源（css、js、images、html等）： 当用户多次访问这个资源，资源的源代码永远不会改变的资源。 动态资源（php、jsp等）：当用户多次访问这个资源，资源的源代码可能会发送改变。 什么是动静分离 静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们就可以根据静态资源的
在Spring Boot2.0+的版本中，只要用户自定义了拦截器，则静态资源会被拦截。但是在spring1.0+的版本中，是不会拦截静态资源的。
Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序，Hexo 可以遍历博客的各个页面，将博客文章等内容渲染到主题（即页面模板）之中，生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。
laravel自带了laravel-mix，用于对js、css、图片等静态资源进行打包。生成的文件的命名会是：app.asjduiik2l1323879dasfydua23.js, 即js原文件名+hash+.js后缀，因为中间的那个hash是随时会变化的，所以在页面引入js文件的时候，就不能写死文件的路径，而是使用mix('app.js')，此时laravel会自动去匹配当前的app.js对应哪个app+hash+.js的文件（项目public目录下会有一个mix-manifest.json, 这里面保存了两者的对应关系，每次打包静态资源的时候都会更新该文件）。
在前端项目开发完成，我们肯定是需要对前端的项目进行测试优化。我们可以先用一些第三方工具对网站进行分析。工具例如
所谓系统动静分离，其实，就是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用服务器的请求。后台应用服务器只负责动态数据请求。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
