前端进阶（9） - js 性能优化利器：prepack

JouyPub 发布于2019-08-23 11:59 / 2829人阅读

摘要：性能优化利器性能优化性能优化不外乎从三个角度入手开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库首先要避免不必要的冗余代码，包括不必要的闭包不必要的变量与函数声明不必要的模块分割等。

js 性能优化利器：prepack 1. js 性能优化

js 性能优化不外乎从三个角度入手：

1.1 开发者在编写程序时，尽量避免不必要的冗余代码，包括冗余的第三方库

首先要避免不必要的冗余代码，包括不必要的闭包、不必要的变量与函数声明、不必要的模块分割等。

比如：

// 低效的实现
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 的替代性解决方案

本质上讲，这些都是从开发者编码的角度来优化的，但这种方式也是很有限的，因为很多时候我们不得不大量的使用第三方库，来提升开发效率。

1.2 使用扁平化代码构建的构建工具

现在前端打包基本上都会用 webpack，但 webpack 打包之后的文件会产生很多冗余代码，这会导致 js 性能降低。

如果在打包文件的性能上有特别需求的小伙伴，可以使用 rollup，详细使用与对比可以参考这里 webpack 之外的另一种选择：rollup.

1.3 代码预编译

js 本身是没有像 python 一样的预编译功能，更没有像 java 一样的编译功能，所以，这里所说的 js 代码预编译 只是通过工具实现的类似功能而已。

这就要提到 prepack 了，它的思路大致是这样：

把不依赖外部环境的逻辑提前进行运算，并把运算结果替换到相应的源码处，然后从源码中移除这段逻辑。

2. prepack 2.1 安装

npm install -g prepack

2.2 编译（打印在命令行）

prepack script.js

2.3 编译后输出文件

prepack script.js --out script-processed.js

2.4 示例

源代码

(() => {
  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);

2.5 配合构建工具一起使用

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

2.6 问题

目前最新版本是 0.2.51，还一直在开发中，很多功能都还没有实现，包括模块输入输出的优化

3. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

GPU云服务器云服务器前端性能优化前端开发性能优化 js性能优化 js进阶视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97807.html

前端进阶（14） - 如何提升前端性能和响应速度

摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。如何提升前端性能和响应速度下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考：如何提高页面加载速度编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

lylwyy2016 2019-08-29 17:04 评论0 收藏0
前端进阶（14） - 如何提升前端性能和响应速度

摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。如何提升前端性能和响应速度下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考：如何提高页面加载速度编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

Airy 2019-08-23 12:30 评论0 收藏0
阿里云前端周刊 - 第 24 期

摘要：版本发布近日发布的版本中引入了许多新的特性，并且能够更好地与协同开发。阿里云前端工程化工具正式开源取黎明破晓之意，原为阿里云业务运营团队内部的前端构建和工程化工具，现已完全开源。推荐 1. Firefox 引入 Headless 模式 https://developer.mozilla.org... 类似于 Chrome 的 Headless 模式，现在 Firefox 也引入了 H...

lncwwn 2019-08-21 16:25 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0