小小改動幫你減小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/