服务器端对文件压缩的作用和减少资源大小html压缩

七、服务器端使用压缩

在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效降低通讯传输的数据量。文本文件的压缩率可达80%以上，所以HTML、CSS、JavaScript文件启用GZip压缩可达到较差的疗效。虽然压缩对服务器和浏览器形成一定的压力，在通讯码率良好，而服务器资源不足的状况下要考量考虑。

八、减少资源大小

html压缩html代码压缩就是压缩在文本文件中有意义，并且在html中不显示的字符，包括下划线，制表符

css压缩css压缩包括无效代码删掉与css谓词合并

js压缩与纷乱js压缩与纷乱包括无效字符及注释的删掉、代码谓词的扩充和优化、降低代码的可读性、实现代码的保护

图片压缩

九、优化网路连结

1使用CDNCDN是内容分发网路，它还能实时地按照网路流量和各个节点的连结、负载情况以及到用户的距离和响应时间等综合信息将用户的恳求再次导向离用户近期的服务节点上，其目的是使用户可以就近的取得所需内容，解决网路拥挤的情况，增加网站的响应速率

2使用DNS预解读当浏览器访问一个域名的时侯，还要解读一次DNS,荣获对应域名的ip地址，在解读过程中，根据浏览器缓存、系统缓存、路由器换算、DNS缓存、域名服务器的次序，进一步调用缓存，直至领到ip地址

3持久连结使用keep-alive或则persistent来构建持久连结，增加了延时和连结构建的费用

十、优化资源读取

1资源读取位置通过优化资源读取位置，修改资源读取时机，使尽或许快地展示出页面内容，尽或许快地使用功能可用

2资源读取时机3.异步script标签defer：异步读取，在html解读完成后执行。defer的实际疗效与将代码放到body上方类似async：异步读取，读取完成后立刻执行4.模块按需读取

5.使用资源预读取preload和资源预加载prefetchpreload让浏览器提早读取指定资源，还要执行时侯再执行，可以加速当前页面的读取速率prefetch告诉浏览器读取下一个页面或许会用到的资源，可以加快下一个页面的读取速率

6.资源懒读取与资源预读取(错峰操作)资源推迟读取称作为资源懒读取，推迟读取资源或符合这些条件的时侯才读取这些资源资源预读取是提早读取用户所需的资源，保证良好的用户感受资源懒读取和资源预读取都是一种错峰操作，在浏览器繁忙的时侯不能操作，浏览器闲暇的时侯再读取资源，优化了网路功耗

十一、减少重画回流十二、用对选择器

id选择器选择元素是最快的

十三、不滥用WEB图标

WEB图标还要下载、解析、重绘当前页面，尽量降低使用。

十四、选用功耗更好的api十五、使用webworker

WebWorker是HTML5提供的一个javascript多句柄解决方案，可以将一些大估算量的代码交由webWorker运行，因而防止阻塞用户界面，在执行复杂估算和数据处理时，这个API极其有用。并且，要留意其浏览器兼容性。

十六、减少重定向

尽量避开使用重定向，当页面发生了重定向，都会推迟整个HTML文档的传输。在HTML文档抵达之前，页面中不会展现任何东西，也没有任何组件会被下载，增加了用户感受

假如一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。由于，假如使用302，则每一次访问http，就会被重定向到https的页面。而永久重定向，在第一次从http重定向到https以后，每天访问http，会直接返回https的页面

十七、开启Gzip（代码压缩）

Gzip即数据压缩，后端生产环境上将js、css、图片等文件进行压缩，通过提高数据传输量降低传输时间，节约服务器网路时延，增加后端功耗。

十八、事件代理(风波委托)

风波代理的原理是DOM元素的丑闻冒泡

可以大量节约显存占用，提高风波注册，例如在table上代理所有td的click风波就十分棒

可以实现当新增子对象时无需重新对其绑定

十九、防抖和节流

使用函数节流（throttle）或函数去抖（debounce），限制某一个步骤的经常触发

二十、webpack优化

【打包公共代码】

使用CommonsChunkPlugin插件，将公共模块拆下来，最终合成的文件才能在最开始的时侯读取一次，便存到缓存中供后续使用。这会带给速率上的增强，由于浏览器会快速将公共的代码从缓存中取下来，而不是每天访问一个新页面时，再去读取一个更大的文件

webpack4将移除CommonsChunkPlugin,取而代之的是两个新的配置项optimization.splitChunks和optimization.runtimeChunk

通过设置optimization.splitChunks.chunks:"all"来启动默认的代码分割配置项

【动态导出和按需读取】

webpack提供了两种技术通过模块的内联函数读取来分离代码，优先选择的方法是，使用符合ECMAScript议案的import()句型。第二种，则是使用webpack特定的require.ensure

【剔除无用代码】

treeshaking是一个术语，一般适于描述移除JavaScript上下文中的未引用代码(dead-code)。它依赖于ES2015模块系统中的静态结构特征，比如import和export。这个术语和概念实际上是盛行于ES2015模块打包工具rollup

JS的treeshaking主要通过uglifyjs插件来完成，CSS的treeshaking主要通过purifyCSS来实现的

【长缓存优化】

1、将hash替换为chunkhash，那样当chunk不变时，缓存仍然有效

2、使用Name而不是id

每位module.id会基于默认的解读次序(resolveorder)进行增量。也就是说，当解读次序发生变化，ID也会逐渐改变

下边来使用两个插件解决这个问题。第一个插件是NamedModulesPlugin，将使用模块的路径，而不是数字标示符。其实此插件有助于在开发过程中输出结果的可读性，因此执行时间会长一些。第二个选择是使用HashedModuleIdsPlugin，推荐适于生产环境建立

【公用代码内联】

使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

【缩小建立目标,排除Webpack不须要解读的模块】

排除Webpack不须要解读的模块。即使用loader的时侯，在尽量少的模块中去使用。我们可以利用include和exclude这两个参数，规定loader只在某些模块应用和在这些模块不应用。