js 性能优化不外乎从三个角度入手:
首先要避免不必要的冗余代码,包括不必要的闭包、不必要的变量与函数声明、不必要的模块分割等。
比如:
// 低效的实现
const urlParams = (() => {
const params = {};
if (location.search) {
location.search.slice(1).split('&').forEach(item => {
const arr = item.split('=');
params[arr[0]] = arr[1] || '';
});
}
return params;
})();
// 更高效的实现
const urlParams = {};
if (location.search) {
location.search.slice(1).split('&').forEach(item => {
const arr = item.split('=');
urlParams[arr[0]] = arr[1] || '';
});
}
其次是要避免使用不必要的第三方库,因为一般第三方库都很大,功能比较多,在条件允许的情况下,尽量少用。
比如:
const users = [
{ user: 'barney', age: 36, active: true },
{ user: 'fred', age: 40, active: false },
{ user: 'pebbles', age: 1, active: true },
];
// 使用 lodash
import _ from 'lodash';
const user = _.find(users, { age: 1, active: true });
// 不使用 lodash
const user = users.find(item => item.age === 1 && item.active === true);
还比如:
- You-Dont-Need-jQuery: 一些 jquery 的替代性解决方案
- You-Dont-Need-JavaScript: 一些使用原生
css
动画替代原有的js
动画的解决方案 - You-Dont-Need-Lodash-Underscore: 一些 lodash、underscore 的替代性解决方案
- You-Dont-Need-Momentjs: 一些 moment 的替代性解决方案
本质上讲,这些都是从开发者编码的角度来优化的,但这种方式也是很有限的,因为很多时候我们不得不大量的使用第三方库,来提升开发效率。
现在前端打包基本上都会用 webpack,但 webpack
打包之后的文件会产生很多冗余代码,这会导致 js
性能降低。
如果在打包文件的性能上有特别需求的小伙伴,可以使用 rollup,详细使用与对比可以参考这里 webpack 之外的另一种选择:rollup.
js
本身是没有像 python
一样的预编译功能,更没有像 java
一样的编译功能,所以,这里所说的 js 代码预编译
只是通过工具实现的类似功能而已。
这就要提到 prepack 了,它的思路大致是这样:
把不依赖外部环境的逻辑提前进行运算,并把运算结果替换到相应的源码处,然后从源码中移除这段逻辑。
npm install -g prepack
prepack script.js
prepack script.js --out script-processed.js
源代码
(() => {
const secondsOfOneDay = 24 * 60 * 60;
window.getSecondsOfDays = days => days * secondsOfOneDay;
})();
编译后的代码
(function () {
var _$0 = this;
var _1 = days => {
return days * 86400;
};
_$0.getSecondsOfDays = _1;
}).call(this);
- prepack-webpack-plugin: A webpack plugin for Prepack
- rollup-plugin-prepack: A Rollup plugin for Prepack
- prepack-vscode: A Visual Studio code plugin for Prepack
- 目前最新版本是
0.2.51
,还一直在开发中,很多功能都还没有实现,包括模块输入输出的优化
更多博客,查看 https://github.com/deepraining/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享 3.0 许可证)