• 小小改动帮你减少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/

    donate

  • 相关阅读:
    二分图匹配详解
    树状数组略解
    质数算法略解
    主席树详解
    线段树略解
    【题解】Luogu P2073 送花
    【题解】Luogu P1533 可怜的狗狗
    分块入门
    【题解】Luogu CF86D Powerful array
    【题解】Luogu UVA12345 Dynamic len(set(a[L:R]))
  • 原文地址:https://www.cnblogs.com/vajoy/p/5225843.html
Copyright © 2020-2023  润新知