网站上线流程分为,株洲 网站建设,西安给公司做网站,ui设计网站设计与网页制作视频教程4、构建优化
资源的合并与压缩所涉及的优化点包括两方面#xff1a;一方面是减少HTTP的请求数量#xff0c;另一方面是减少HTTP请求资源的大小。
1、HTML 压缩
1、什么是 HTML 压缩 百度首页部分 HTML 源代码 谷歌首页部分 HTML 源代码 虽然这些格式化的字符能带来很好的代…4、构建优化
资源的合并与压缩所涉及的优化点包括两方面一方面是减少HTTP的请求数量另一方面是减少HTTP请求资源的大小。
1、HTML 压缩
1、什么是 HTML 压缩 百度首页部分 HTML 源代码 谷歌首页部分 HTML 源代码 虽然这些格式化的字符能带来很好的代码可读性但对浏览器解析过程来说其实并不需要反而还增加了资源的开销。
HTML压缩就是要删除在文本文件中有意义的但在HTML中并不参与解析的字符。这些字符包括空格、制表符、换行符及一些其他意义的字符如HTML注释等。
如果单纯只看一个文件的压缩可能效果并不明显比如就以前面百度首页为例原始字符长度为158519经过压缩之后的长度为157334长度减少了约0.75%。
难道这就能说明HTML压缩的效果不明显吗其实我们不能这么考虑对大型的互联网公司来说每一个请求的减少都是一个非常大的优化。以谷歌为例它的网络流量占到了全网流量的40%左右假如网络流量能达到5ZB(1ZB109TB)以谷歌的流量占比它当年的实际网络流量就是5ZB×40%2ZB那么当谷歌经过优化让每1MB的请求减少一个字节则整年便可节省2000TB的流量。如果以每GB流量一毛钱计算那么一年省下来的开支也不是个小数目这就是要进行HTML压缩的原因。
2、如何压缩
1、使用 html-minifier
使用nodejs所提供的html-minifier工具进行压缩它涉及很多参数的配置包括是否去掉注释removeComments是否去掉空格collapseWhitespace是否压缩HTML中的JavaScript的minifyJS及是否压缩HTML中的CSS的minifyCSS具体方式如下 2、CSS 压缩
CSS代码也能进行压缩而且很有必要去压缩如下是谷歌首页经过压缩的部分CSS源代码 谷歌首页部分 CSS 源代码 从中非常直观的感受是它去掉了回车和换行此外这里的CSS压缩还做了两件事首先是无效代码的删除因为对有些CSS来说无效的代码可能是注释和无效字符需要将这些无效的代码删除这一步很重要其次是CSS语义合并通常我们写的CSS可能由于文件层级的嵌套很难避免一定的语义重复所以就需要进行语义合并。
可以使用html-minifier针对HTML中的CSS进行压缩。除此之外还可以使用clean-css进行CSS的压缩其基本使用方法如下 clean-css也有许多配置项比如是否基于语义进行合并的merging是否优化颜色取值的colors以及诸多对不同类型浏览器兼容性的规则导出。
3、JavaScript 压缩与混淆
JavaScript部分的处理主要包括三个方面无效字符和注释的删除、代码语义缩减和优化及代码混淆保护。无效字符和注释的删除原理与HTML和CSS的压缩类似。
1、代码语义缩减和优化
通过对JavaScript的压缩可以将一些变量的长度进行缩短比如说原本一个很长的变量名经过压缩后可以用很短的像a、b来代替这样能进一步有效地缩减JavaScript的代码量。同样还可以针对一些重复代码进行优化比如去除重复的变量赋值将一些无效的代码进行缩减与合并的优化。 2、代码混淆保护
由于任何能够访问到网站页面的用户都可以通过浏览器的开发者工具查看到前端的JavaScript代码如果前端代码的语义非常明显没进行压缩也没进行混淆其格式还完整保留那么理论上任何访问网站的人都可以轻易地窥探到我们代码中的逻辑从而去做一些威胁系统安全的事情。所以进行JavaScript代码压缩和混淆的处理也是对我们前端代码的一种保护。
如何来防止别有用心之人窥探到我们业务的核心代码呢实际上就是进行JavaScript压缩将前端源代码的可读性变得尽可能低混淆变量与方法的命名。
对大部分公司来说HTML压缩可有可无但是CSS与JavaScript压缩却是必须要进行的。
JavaScript压缩处理也有类似的第三方库可供使用uglifyJS2。可以通过npm引入uglify-js库来使用也可以结合构建工具一起使用其单独使用时的方法如下 其中压缩混淆的配置对象结构如下 4、webpack 构建与优化
1、尽量与时俱进尽可能使用最新稳定版本的webpack、nodejs、npm或yarn能有效地提升打包构建的效率。
2、较少 Loader 的执行
根据具体情况使用include或exclude在尽可能少的模块上执行Loader。webpack的配置文件如下 这里关注module字段中对JavaScript文件的处理规则如果不加exclude字段则webpack会对该配置文件所在路径下的所有JavaScript文件使用babel-loader虽然babel-loader的功能强大但它执行起来很慢。
这样所处理的JavaScript不仅会包含我们的项目源代码还会涉及node_modules路径下项目引用的所有第三方文件。由于第三方库的文件在发布前本身已经执行过一次babel-loader没必要再重复执行一次增加不必要的打包构建耗时所以exclude字段不可省略。
同时与之对应的还有一个include字段其使用含义与exclude相反即仅对其指定范围内的JavaScript文件进行处理以降低loader被执行的频率。
对于图片文件则没有必要通过include或exclude来降低loader的执行频率因为无论哪里引入的图片最后打包都需要通过url-loader对其进行处理所以include或exclude的语法并不适用于所有loader类型要根据具体的情况而定。
使用exclude或include可以帮助我们规避对庞大的第三方库文件的处理但仅通过限定文件处理范围所带来的性能提升其实是有限的除此之外如果开启缓存将构建结果缓存到文件系统中则可让babel-loader的工作效率得到成倍增加处理方式也很简单只需为loader增加相应的参数即可 3、确保插件的精简和可靠
建议使用webpack官方网站上推荐的插件
4、合理配置 resolve 参数
配置resolve参数可以为我们在编写代码引入模块时提供不少便利比如使用extensions省略引入JavaScript文件的后缀使用alias减少书写所引入模块的多目录层级使用mainFiles声明目录下的默认使用文件等但当我们使用这些参数带来便利的同时如果滥加使用也会降低打包速度。
1、可对 js、ts 省略路径但不要对 css、图片等设置 可以使用resolve中的extensions属性来申明这些后缀让项目在构建打包时由webpack帮我们查找并补全文件后缀。同时对组件路径的引用也可通过resolve的alias配置来进行简化配置如下 如此配置的含义是当所引入的模块默认了文件后缀时webpack会在其指定路径下依次查找是否有.js、.jsx、.ts这三种后缀的文件如果有便使用并且在模块引入的同时用cpn代替src/component。当有了上述配置后之前提到的Hello模块的引入便可写成如下形式 2、不建议使用 mainFiles 属性
另外resolve还有一个mainFiles属性通过对它的配置可以指定让webpack查找引入模块路径下的默认文件名虽然它能在很大程度上简化模块引用的编码量但付出的代价是增加了打包构建过程中对目标文件的查找时间所以不建议使用。
5、使用 DllPlugin
前端项目中经常会用到庞大的第三方库来协助我们完成特定功能的开发而每当发生修改需要重新进行打包时webpack会默认去分析所有引用的第三方组件库最后将其打包进我们的项目代码中。在通常情况下第三方组件包的代码是稳定的不更换所引用的版本其代码是不会发生修改的所以这就给出了一条优化的思路我们仅需要在第一次打包时去分析这些第三方库而在之后的打包过程中只需使用之前的结果即可。
这便会用到DllPlugin它是基于Windows动态链接库(DLL)的思想创建出来的该插件会把第三方库单独打包到一个文件中作为一个单纯的依赖库它不会和我们的项目代码一起参与重新打包只有当依赖自身发生版本变化时才会重新进行打包。
使用DllPlugin处理文件的过程可分为两步首先基于动态链接库专属的配置文件打包dll库文件然后再基于webpack的构建文件打包项目代码。下面以一个简单的React组件为例 这里引入了三个在React项目中经常会遇到的第三方包react、react-dom和lodash如果我们不进行任何处理每当修改该文件后进行重新打包则都会引起webpack去分析它们若打包次数频繁显然会浪费许多时间。
接下来我们进行优化具体分为两步首先将所依赖的第三方库打包成dll文件然后检查第三方库的版本是否在其后的迭代中发生了变化若无变化就都使用之前的打包结果。这里可以为第三方库创建单独的配置文件内容如下 该配置文件中将react、react-dom和lodash三个包的包名存储在数组中并赋值给vendors其含义是经过打包后这三个包归于一个名为vendors的包。output中声明了该包的文件名及输出路径library字段表示该第三方包对外暴露的引用名即在其他地方可以使用该字段值引用包中的内容。最后使用webpack中的DllPlugin插件对该包中的映射关系进行分析并将结果输出到指定路径下的json文件。
然后我们需要在webpack主配置文件中声明对上述打包好的第三方包的使用规则 这样配置的意思是首先引入第三方包的打包结果路径其次引入第三方包的映射关系当发生重新打包构建时webpack会首先查看引用的第三方包是否包含在已建立的映射关系文件vendor.manifest.json中若存在便通过所声明的全局变量vendors去使用若不存在便去node_modules中获取所需的模块动态地进行打包操作。
上述方式虽然能够降低重复打包构建的时间但将项目中所有第三方包都打包进一个文件势必会使其体积过大从而导致请求过慢所以在实际项目中我们也应根据各个第三方包的大小进行拆分就上述代码而言可将react和react-dom从vendors中组成为一个新包代码如下 如此在执行webpack构建后会生成四个文件分别是vendors包的代码文件vendors.dll.js和其映射关系文件vendors.manifest.jsonreact包的代码文件react.dll.js和其映射关系文件react.manifest.json同时对应的主配置文件也需要进行相应的修改以引入打包的代码文件和映射关系文件。 这样处理后既降低了重复构建时的打包时间又规避了打包成单一文件时可能由于代码文件体积过大而存在加载过慢的风险。
6、将单进程转化为多进程
webpack是单进程的就算有多个任务同时存在它们也只能一个一个排队依次执行这是nodejs的限制。
但好在大多数CPU已经都是多核的了我们可以使用happypack充分释放CPU在多核并发方面的优势帮助我们把打包构建任务分解成多个子任务去并发执行这将大大提高打包的效率。其使用方法也很简单就是将原有的loader配置转移到happypack中去处理 7、压缩打包结果的体积
1、删除冗余代码
webpack从2.0版本开始便基于ES6推出了Tree-shaking它能根据import、export的模块导入导出语法在构建编译过程中分析每个模块是否被真实使用对于没用到的代码会在最后的打包结果中删除。
容易看出Tree-shaking对处理模块级的代码冗余比较擅长但对更细粒度的代码冗余比如console语句、注释等可能就需要在CSS和JavaScript压缩过程中进行处理了常用的方式是通过uglifyjs-webpack-plugin来实现的具体配置方式如下 2、代码拆分按需加载
项目源代码也需要拆分可以根据路由来划分打包文件当访问到不同路由时再触发相应回调请求打包文件对于webpack的打包输出的配置如下 以React项目为例在配置路由时还需添加如下内容 此处的关键方法就是require.ensure这个异步方法webpack会将我们这里定义的组件单独打包成一个文件仅当路由跳转到mine时才会触发回调去获取MyComponent组件的内容。
3、可视化分析
分析打包结果的可视化工具webpack-bundle-analyzer。它的分析结果会生成一个文件大小图
该插件的工作原理也比较简单就是分析在compiler.plugin(‘done’function(stats))时传入的参数stats它是webpack的一个统计类Stats的实例然后通过对实例调用toJson()方法转成json文件再从中提取出chunks各个包的大小信息最后在Canvas中进行画图。通过该图能让开发者快速意识到哪些模块异常的大然后找出过大的原因去优化它。 webpack-bundle-analyzer分析结果 该工具使用起来也很方便就如使用普通插件一样
