1、压力测试概要
测试环境：apache-tomcat-8.5.16, Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
apache-jmeter-5.0
Tomcat jvm启动参数
JAVA_OPTS="-server -XX:MaxNewSize=2048m –XX:NewSize=2048m –Xms8192m –Xmx8192m"
Tomcat Server参数：
<Connector port =" 8080 "
enableLookups =" false "
disableUploadTimeout =" true "
acceptCount =" 2000 "
maxSpareThreads =" 1000 "
minSpareThreads =" 300 "
maxThreads =" 2000 "
redirectPort =" 8443 " compressableMimeType =" text/html,text/xml,text/javascript,text/css,text/plain,application/json " compression =" on " connectionTimeout =" 20000 " protocol =" HTTP/1.1 "/> />
Tomcat context 配置：
driverClassName="com.mysql.jdbc.Driver" filters="stat"
initialSize="10" maxActive="200"
maxPoolPreparedStatementPerConnectionSize="20" maxWait="60000"
minEvictableIdleTimeMillis="300000" minIdle="10"
testOnBorrow="false" testOnReturn="false" testWhileIdle="true"
timeBetweenEvictionRunsMillis="60000" type="javax.sql.DataSource"
" timeBetweenEvictionRunsMillis =" 60000 " testWhileIdle =" true " testOnReturn =" false " testOnBorrow =" false " poolPreparedStatements =" true " name =" jdbc/xxxxApp " minIdle =" 50 " minEvictableIdleTimeMillis =" 300000 " maxWaitMillis =" 60000 " maxPoolPreparedStatementPerConnectionSize =" 20 " maxTotal =" 400 " initialSize =" 50 " filters =" stat " driverClassName =" com.mysql.jdbc.Driver " connectionProperties =" druid.stat.slowSqlMillis=3000 " auth =" Container "/
数据库信息：
测试时间：xxxx/xx/xx
服务端配置：
客户端配置：
测试工具：JMeter
2、测试说明
（1）名词定义（时间单位ms）
Sample:本次测试场景共运行多少线程；
Average:平均响应时间；
Median:统计意义上的响应时间中值；
90% line:所有线程中90%的线程响应时间都小于xx的值
Min:响应最小时间；
Max:响应最大时间；
Error:出错率；
Throughput - 吞吐量以“requests/second、requests /minute、 requests /hour”来衡量。 时间单位已经被选取为second，所以，显示速率至少是1.0，即每秒1个请求。 当吞吐量被保存到CVS文件时，采用的是requests/second，所以30.0 requests/second 在CVS中被保存为0.5
Kb/sec - 以Kilobytes/seond来衡量的吞吐量
（2）测试过程说明：
测试以下页面：
/xxx/bbbb/cccc
测试数据量（模拟用户量）:
1000个线程
3000个线程：
5000个线程：
7000个线程：
PROD 环境监控
webpack打包的时候只认识 .js 文件，但我们开发中肯定不仅仅只是js文件，如 .html 、 .css 、 .jpg 等，webpack提供了很多 loader 来打包不同类型的文件。
对于加载css文件来说，我们需要一个可以读取css文件的loader，这个loader最常用的是 css-loader 。
webpack.config.js
css-loader 只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中，如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是 style-loader 。
* 注意： 因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将styleloader写到css-loader的前面。
其实 style-loader 做的事情很简单，就是在动态创建了一个 style 标签，把 css-loader 处理的css内容放到style标签内，然后在插入到页面的 head 标签内。
安装less工具将less文件转为css文件。
使用 less-loader ，来自动使用less工具转换less到css
安装
使用
在 这里 可以查询浏览器的占有率。
Browserslist 是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置
方案一：在 package.json 中配置：
方案二：在根目录新建 .browserslistrc 文件
方案一和方案二配置的条件都是 or 关系， 如果要同时满足条件用 and
PostCSS 是一个通过JavaScript来转换样式的工具，这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置，但是实现这些工具，我们需要借助于PostCSS对应的插件。
可以在 这里 查询到css样式添加规则。
因为我们需要添加前缀，所以要安装autoprefixer：
命令行直接使用使用postcss工具，并且制定使用autoprefixer：
在webpack中使用postcss就是使用 postcss-loader 来处理的。
安装
配置
第一种方案：
webpack.config.js
第二种：
也可以将plugin封装出来，在根目录新建 postcss.config.js 文件：
webpack.config.js
事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixe，我们可以使用另外一个插件： postcss-preset-env 。
postcss-preset-env也是一个postcss的插件，它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）。
安装 ：
使用
将 autoprefixer 替换成 postcss-preset-env 就行了：
有些插件直接写字符串就行，会自动requre：
问题复现：
假如 main.js 里面引入了 src/index.css ，而 src/index.css 里使用 @import 引入了 src/test.css ，就会出现 src/test.css 文件里的样式不会被 postcss 所处理，这时候就需要配置：
webpack.config.js
要处理jpg、png等格式的图片，我们也需要有对应的loader： file-loader
安装
配置
webpack.config.js
图片资源加载方式：
有时候我们处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等。这个时候我们可以使用 PlaceHolders 来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容。
介绍几个最常用的placeholder：
自定义图片打包名字和输出路径：
webpack.config.js
url-loade r和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。
安装
配置
和file-loader用法很相似
在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader，在webpack5之后，我们可以直接使用 资源模块类型（asset module type） ，来替代上面的这些loader。
注意： asset module type 打包的图片资源如果用require不需要 .detault
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
自定义输出文件和文件名
webpack5 的[ext]已经包含了 .
第一种写法：
这种写法包含所有的assetModule的定义，不推荐。
webpack.config.js
第二种写法：
webpack.config.js
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
webpack.config.js
asset 可以实现url-loader的limit效果。
我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理。
1、首先准备一个HTML结构的文档，页面可以制作的简单点。
2、然后在页面的body区域中放置一个img图片。
3、我们先来运行一下页面，你会在页面中看到如下图所示的圆圈。
4、接下来我们就需要对页面进行CSS处理，如下图所示，给img图片添加样式，注意里面有旋转样式。
5、然后实现旋转的设置，这个是CSS3的新功能，主要是对图片进行旋转度数的设置。
6、最后运行程序，你会看到页面中的圆圈在不停的旋转，和我们平常看到的加载中的效果很像。
