小小改动帮你减少bundle.js文件体积(翻译)
2024-10-16 13:13:55
我已经从事过好多年的SPA开发工作,我发现很多的程序猿都从来不往 bundle.js 文件的体积上动脑筋,这让我有点懵逼。
“安心洗路,等俺把代码混淆压缩后就一切666了”,若是有人这么说,我会翻白眼。
其实当我们压缩 bundle.js 的时候,我们可能会凭空折腾出一个庞大的应用,导致其加载时间抑或在移动端的连接时间变慢。那么问题就来了——我们是否有办法给 bundle 显著地瘦瘦身?
其实一切都很简单——使用相对文件路径即可。我们来俩个示例看看它们的区别。
示例1
首先,我们使用ES6的解构赋值(destructuring assignment)来加载一些 lodash 模块:
# src/example.js import { concat, sortBy, map, sample } from 'lodash'; // Example: sortBy
const users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 42 },
{ 'user': 'barney', 'age': 34 }
];
const exampleSortBy = sortBy(users, function(o) { return o.user; });
console.log(exampleSortBy); // Example: map
const exampleMap = map(users, 'user');
console.log(exampleMap); // Example: concat
const array = [1];
const exampleConcat = concat(array, 2, [3], [[4]]);
console.log(exampleConcat); // Example: sample
const exampleSample = sample([1, 2, 3, 4]);
console.log(exampleSample);
接着咱用 browserify 来编译和打包该应用:
browserify src/example.js -o dist/bundle.js -t [ babelify --presets [ es2015 ] ] -v -d -g uglifyify
到目前为止感觉还不错,我们来写第二个示例,然后对比它们的文件大小~
示例2
我们来写一个完全一样的应用,不过这次我们将使用文件路径来引入所需模块,而非直接引入整个 lodash:
# src/example-2.js import concat from 'lodash/concat';
import sortBy from 'lodash/sortBy';
import map from 'lodash/map';
import sample from 'lodash/sample'; // Example: sortBy
const users = [
{ 'user': 'fred', 'age': 48 },
{ 'user': 'barney', 'age': 36 },
{ 'user': 'fred', 'age': 42 },
{ 'user': 'barney', 'age': 34 }
];
const exampleSortBy = sortBy(users, function(o) { return o.user; });
console.log(exampleSortBy); // Example: map
const exampleMap = map(users, 'user');
console.log(exampleMap); // Example: concat
const array = [1];
const exampleConcat = concat(array, 2, [3], [[4]]);
console.log(exampleConcat); // Example: sample
const exampleSample = sample([1, 2, 3, 4]);
console.log(exampleSample);
然后我们对其也进行编译打包:
browserify src/example-2.js -o dist/bundle-2.js -t [ babelify --presets [ es2015 ] ] -v -d -g uglifyify
问题来了—— 这两个示例最终打包后的 bundle.js,哪一个文件更小呢?
比较
上述的俩个应用其实做了一样的事情,它们几乎写的一模一样的代码。但当我面比较这俩个打包后的文件,你会发现示例2要明显小得多:
$ ls -lha dist/
bundle-2.js (84K)
bundle.js (204K)
原因其实在前面已经提到了——我们不再引入整个 lodash 模块,而是只引入那些我们所指定需要的模块。
这个方法也能在几乎全部的node模块中奏效。简单地把解构指派的 import 声明形式替换为本地路径的 import 声明形式,就能显而易见地减少文件体积。
资源
如果你想跑一跑本文的示例代码,可以到下面的github仓库获得资源:
最新文章
- Ognl表达式基本原理和使用方法
- over partition by与group by 的区别
- 丰富自己的代码库-SqlServerHelper(Ado)
- Some Simple Models of Neurons
- 修复 VirtualBox 下 Ubuntu 14.10 屏幕分辨率问题
- android 获取资源文件 r.drawable中的图片转换为drawable、bitmap
- SQL 自动增长 identity
- eclipse连接远程hadoop集群开发时0700问题解决方案
- HDU 5054 Alice and Bob
- Windows配置Python编程环境
- POJ 1422 Air Raid(二分图匹配最小路径覆盖)
- thinkphp5判断移动或pc端访问并调用不同模板
- scoring_criteria.go
- ubuntu日常使用指南
- vue 中 echart 在子组件中只显示一次的问题
- 从字节码看java类型转换【 深入理解 (T[]) new Object[size] 】
- 郑晔谈 Java 开发:新工具、新框架、新思维【转载】【整理】
- win10 在任务栏添加 desktop 快捷图标
- 案例:Redis在唯品会的大规模应用
- 第二节 JavaScript基础