代码压缩

来自 《JavaScript 标准参考教程（alpha）》 ，by 阮一峰 在Javascript的开发过程中，经常会遇到一些重复性的任务，比如合并文件 、 压缩代码 、 检查语法错误、将Sass代码转成CSS代码等等。通常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务 。 简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务 。 这可以简化工作流程，减轻重复性工作带来的负担 。 Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。 sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装 。 Grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块 。 这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本 。 首先，在项目的根目录下，创建一个文本文件package.json，指定当前项目所需的模块 。 下面就是一个例子 。 { "name": "my-project-name", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt"

webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。 使用 UglifyJS 压缩代码如下： module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), ] } 上一节介绍的HappyPack的思想是使用多个子进程去解析和编译JS,css,等，这样就可以并行处理多个子任务，多个子任务完成后，再将结果发到主进程中，有了这个思想后，因此 ParallelUglifyPlugin 插件就产生了，当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。 1. 安装 webpack

本文提到的网站性能指网站的响应速度，这也符合绝大部分人对于网站性能的理解：访问快速的网站性能好，反之，访问速度越慢，则网站性能越差。本文总结的优化方法是宏观的工程层面的方法，并不包含微观的语言语法层面的方法，例如，JS、CSS的语法优化，这一部分同样影响网站的性能，但语言语法层面的优化更多的是取决于开发人员的编程水平。 什么样的网站响应速度快呢？其实很容易想到，网站加载资源的速度越快，网站响应速度越快；网站需要加载的资源越少，网站响应速度越快。这就分别对应网站性能优化的两大方向：资源缓存、资源合并压缩。当浏览器完成资源的加载后，需要进一步解析资源，才能渲染出最终的网页，所以，浏览器的解析机制也是网站性能优化的一个方向。各种优化方法都可以归类到这三个大方向中。 1.资源缓存 1.1 使用CDN 将网站的静态资源分离，如静态HTML、图片Image、样式CSS、脚本JS等，把静态资源部署到CDN中，可以明显加快这部分资源的加载速度。 1.2 利用HTTP缓存机制 HTTP缓存会把浏览器加载过的资源缓存到本地，下次加载时，只要缓存的资源没有过期，就可以直接使用本地的资源，减少了HTTP请求次数，加快了资源加载速度。具体做法是设置HTTP Header 中的Cache-Control参数。HTTP 1.0 中使用Pragma和Expires两个参数进行缓存，不过早已不推荐使用。 2.

　　网站快速加载，是提供良好用户体验的前提。然而，网站功能的不断增多，程序包的不断臃肿，导致网站访问时较大的下载量，最终影响了响应速度。没有一个用户喜欢等待，如何减少代码量，为网站减去过多负担，Craig Buckler在sitepoint网站发表了一篇文章《 10 Quick and Easy Fixes to Reduce Page Weight 》，分享为网站减负的十个建议。下面为该文的编译内容。 　　2013年，网站页面的重量增加了32%，竟然达到了1.7MB，包含96个独立HTTP请求。这只是一个平均数值，其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行，其中很大的责任在于Web开发者。 　　过于笨重的网站将严重影响网站的最终体验，主要表现在以下四个方面： 更大的下载量，导致更慢的用户体验。并不是每个人都拥有20M的网络连接，尤其是对于那些不发达地区。不管你的网站多么优秀，用户永远不希望等待。 移动Web访问正迅速发展，移动网民几乎占到所有网民的1/4。在典型的3G网络连接下，一个1.7Mb的网站加载需要近一分钟。如果你的网站无法高效工作于这些移动设备，那采用响应式Web设计技术又有什么用呢？ 网站加载速度已被谷歌加入排名算法中。加载缓慢会降低网站排名，同时也会影响搜索引擎优化。 网站包含的代码越多，更新和维护它所花费的时间就会越长。 　　Craig

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢？简单的说，sourceMap是为了压缩后的代码调式提供方便，比如线上的JS文件已经压缩了，但是线上比如说有bug，但是代码已经是压缩后的，对于开发并不好调式，所以想生存一个对应的Map文件，然后使用chrome浏览器在源文件未压缩的JS文件下调式。 那么Map文件到底是什么呢？简单的来讲它就是记录信息，记录一些为压缩之前的js文件的位置，及压缩后的文件对应未压缩之前的文件,对应第几行第几列的那些代码！ 在讲解使用grunt生存Map文件之前，我们还是来简单复习下grunt如何合并及压缩代码，对于grunt我们并不陌生，之前有几篇文章我们也讲过 如何使用grunt 但是我们这边还是一步一步先来讲解下grunt合并，压缩及生成Map文件，及在chrome浏览器下如何调式代码的整个过程吧，也更使初学者更容易理解及掌握！ 　　 Grunt是一套前端自动化工具，基于nodeJS基础之上，对于我们前端一般用于以下几点： 　　1． 压缩JS或者CSS文件。 　　2． 合并JS或者CSS文件。 1：Grunt是基于nodeJS,所以未安装nodeJS，先需要安装nodeJS。 1. 下载安装文件： 下载地址： http://www.nodejs.org

①项目发布 npm run build 或者npm run build--report 会打开浏览器显示包目录的分析图(就是那个文件大或者小) 在confug下的undex.js 的build 里最后一行 开启GZip压缩 但是压缩后体积还是大 可以为web服务器开启GZip压缩(Apache、IIS、Tomcat、Node服务器) 如果不启用GZip压缩,那么,服务器上文件的真实大小,,就是网络传输中,真实传输的大小 如果服务器,启用GZip压缩,则 文件在网络中,传输的时候,会被压缩,经过Gzip的压缩之后,文件体积会大约减小到之前的四分之一 在build下的webpack.prod.conf.js文件中添加一个与module、output 平级的externals: {}, externals 意思是把项目中,一些体积比较大的包,抽离为 外部加载的方式(link的方式) // 把项目中，一些体积比较大的包，抽离为 外部加载的方式 externals: { // 包名: '构造函数' vue: 'Vue', // vue 'vue-router': 'VueRouter', // 路由 axios: 'axios', lodash: '_', nprogress: 'NProgress', echarts: 'echarts' }, npm i compression -S 在

原文链接 Grunt 安装nodejs 　　Grunt和所有grunt插件都是基于nodejs来运行的，如果你的电脑上没有nodejs，就去安装吧。安装nodejs非常简单，完全傻瓜式、下一步下一步下一步、的安装方式，这里不再赘述。去 https://nodejs.org/ 上，点击页面中那个绿色、大大的 “install” 按钮即可。 　　安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。 　　注意两点。第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。 安装grunt-CLI 注意，如果你的电脑不联网，以下操作你都做不了，所以，首先保证电脑联网。 　　“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件，这里就先不要问了，先照着我说的做。 　　打开控制台（注意：windows系统下请使用管理员权限打开），输入： npm install -g grunt-cli # -g表示全局安装 注意，mac os 系统、部分linux系统中，在这句话的前面加上 “sudo”

针对测试的点： 耗电量 优化方法一：CPU时间片 优化方法二：wake lock 优化方法三：传感器 优化方法四：云省电策略 流畅度 Android提供 两个很好用的工 具：Traceview以及Systrace 导航评测 网络 自己动手对几种典型的运营商网 络（移动2.5G，联通2G/3G等）进行测试，抓包分析 安装包瘦身 1）代码部分：冗余代码、无用功能、代码混淆、方法数缩减。 2）资源部分：冗余资源、资源混淆、图片处理（压缩、图片转 换、点9图化等）。 3）对整个安装包做7zip极限压缩。 来源： https://www.cnblogs.com/mobies/p/11671574.html

摘要： 前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了，其实还会有很多可以提升的地方。本文将介绍Google和雅虎关于前端优化的最佳实践以及工具，你可以逐一检验你的Web应用。 前端的性能对于一个Web应用来说非常重要，如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应，那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。 你的Web页面的速度是否已经足够快了？其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议，并发布了一些工具，你可以逐一检验你的Web应用，以便达到更高的性能。 这些优化不仅仅可以给用户提供更好的体验，从开发者角度来说，进行优化还可以减少页面的请求数、降低请求所占的带宽、减少资源的浪费。 下面来看看Google和雅虎提供的Web页面优化最佳实践。 一、Google的Web优化最佳实践 1. 避免坏请求 有时页面中的HTML或CSS会向服务器请求一个不存在的资源，比如图片或HTML文件，这会造成浏览器与服务器之间过多的往返请求，类似于： 浏览器：“我需要这个图像。” 服务器：“我没有这个图像。” 浏览器：“你确定吗？这个文档说你有。” 服务器：“真的没有。” 如此一来，会降低页面的加载速度。因此，检查页面中的坏链接非常有必要，你可以通过

前言：为什么要进行页面性能优化 　 互联网有一项著名的8秒原则。用户在访问Web网页时，如果时间超过8秒就会感到不耐烦，如果加载需要太长时间，他们就会放弃访问。 大部分用户希望网页能在2秒之内就完成加载。事实上，加载时间每多1秒，你就会流失7%的用户。8秒并不是准确的8秒钟，只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能，提高页面加载速度呢？这是本文主要要探讨的问题，然而性能优化是个综合性问题，没有标准答案，想要面面俱到罗列出来，并非易事。 本文只是简单介绍了一下页面性能优化有哪些常用方法，给新手普及知识用。也是自我学习的一个过程 一、资源压缩与合并 资源压缩主要包括这些方面： 　　 html压缩 　　 css 压缩 　　 js的压缩和混乱 　　 文件合并 资源压缩 可以从文件中去掉多余的字符，比如 回车 、 空格 。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节，这些字符就是网页中多余的东西，会影响网页的性能。 1.html压缩 html代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括 空格 ， 制表符 ， 换行符 等，还有一些其他意义的字符，如HTML注释也可以被压缩。 如何进行html压缩： 使用在线网站进行压缩(开发过程中一般不用) nodejs 提供了html