Javascript优化技巧（文件瘦身篇）

为什么需要文件瘦身？

在前端开发中，Javascript文件瘦身是一项必修课。因为随着项目的不断庞大，Javascript代码也会不断增加，而且有些代码可能已经过时、冗余、或者被其中其他代码所替代，这些代码对于整个项目的性能影响还是非常大的。

通过文件瘦身技巧，我们可以有效减少代码的冗余，提高代码的复用性，优化代码的性能，从而使网站页面加载更快。

开始进行文件瘦身

1. 删除没有用到的代码

一个网站往往会包含各种第三方组件和库，这些库和组件虽然生成了大量的代码，但其中可能有许多代码并没有被使用到。这时候，就需要对这部分没有用到的代码进行删除。

通过检查控制台或者浏览器的开发者工具，可以了解到哪些代码文件并没有被使用到，在页面加载之前将这些没用到的代码删除即可提高网站性能。

比如：

从以下js代码中，我们发现 utils.js 里的代码 function div(a,b){return Math.floor(a/b)} 并没有被使用到。在页面加载之前，我们可以将其从代码文件中删除。

//utils.js
function add(a,b){return a+b}
function minus(a,b){return a-b}
function div(a,b){return Math.floor(a/b)}
function multiply(a,b){return a*b}

//main.js
var a = 3
var b = 4
console.log(add(a,b))
console.log(minus(a,b))
console.log(multiply(a,b))

优化后的代码如下：

//utils.js
function add(a,b){return a+b}
function minus(a,b){return a-b}
function multiply(a,b){return a*b}

//main.js
var a = 3
var b = 4
console.log(add(a,b))
console.log(minus(a,b))
console.log(multiply(a,b))

2. 压缩代码以减少文件大小

在代码文件瘦身过程中，压缩代码是另一个重要的技巧。通过压缩代码可以有效地减少代码文件的大小，从而加速加载速度。

通过使用工具如UglifyJS等压缩工具，可以将代码文件中的注释、空格、多余的空行等无关内容去掉，从而大大减少文件体积。

比如：

以下为没有压缩的代码文件大小

//main.js
function add(a,b) {
    //这是一个加法函数
    return a+b
}

function minus(a,b) {
    //这是一个减法函数
    return a-b
}

function multiply(a,b) {
    //这是一个乘法函数
    return a*b
}

console.log(add(1,2))
console.log(minus(3,2))
console.log(multiply(2,3))

压缩后的代码文件大小变为

//main.js
function add(t,n){return t+n}function minus(t,n){return t-n}function multiply(t,n){return t*n}console.log(add(1,2)),console.log(minus(3,2)),console.log(multiply(2,3));

可以看到，经过压缩之后，代码文件大小减少了大约一半。

总结

通过删除没有用到的代码和压缩代码等技巧，我们可以成功地对Javascript代码进行文件瘦身。这些技巧既可以让网站页面在性能方面得到提升，同时还可以提高代码的复用性，从而进一步加速开发过程。