小小改动帮你减少bundle.js文件体积（翻译）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

我已经从事过好多年的SPA开发工作，我发现很多的程序猿都从来不往 bundle.js 文件的体积上动脑筋，这让我有点懵逼。

“安心洗路，等俺把代码混淆压缩后就一切666了”，若是有人这么说，我会翻白眼。

其实当我们压缩 bundle.js 的时候，我们可能会凭空折腾出一个庞大的应用，导致其加载时间抑或在移动端的连接时间变慢。那么问题就来了——我们是否有办法给 bundle 显著地瘦瘦身？

其实一切都很简单——使用相对文件路径即可。我们来俩个示例看看它们的区别。

示例1

首先，我们使用ES6的解构赋值（destructuring assignment）来加载一些 lodash 模块：

# src/example.jsimport { 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.jsimport 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);