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

我已经从事过好多年的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仓库得到资源：

https://github.com/tlackemann/minimize-bundle-js-size

 

注：原文地址 https://lacke.mn/reduce-your-bundle-js-file-size/