zoukankan      html  css  js  c++  java
  • 结合自己造的轮子实践按需加载

    本文提供了按需加载了几种思路,并给出了相应实践。原文地址

    为了探究按需加载的本质,选择了对先前造的轮子 diana 进行实验。

    实验一:全量引用

    import * as _ from 'diana'
    

    打包体积结果如下:

    测试的是 diana 0.4.1

    实验二:部分引用

    import { equal } from 'diana'
    

    打包体积结果如下:

    经过测试,发现两种方式打包后的体积都为 21 k,第二种方式仍然将整个包引入项目中了。可是 lodash 就是这么玩的呀,这和说好的不一样呀,难道是忽视了什么细节么。

    下文就来揭开面纱,并动手改造项目,最终目标是用第二种写法实现按需加载,减小打包体积。

    按需加载的方案

    按需加载的效果是最终打包的代码里没有未引入的模块,从而优化项目体积。下面给出 3 种可以按需加载的方案。

    给每个函数单独发布 npm 模块

    按需加载的方案一是将每个函数都单独发布一个包,可以在 npm 上查阅 lodash,这种引用方式如下:

    import { isEqual } from 'lodash.isequal'
    

    每一个函数都作为一个单一的模块导出

    按需加载的方案二是将每一个函数都作为一个单一的模块导出,参照这种思路将 diana 的每个函数暴露在 lib 目录下,部分截图如下:

    这时候再来测试下打包体积:

    import equal from 'diana/lib/equal'
    

    打包体积结果如下:

    可以看到打包体积减小约为原来的 1/7 了,但是这种方案在写法上过于冗长,那要不借助下 babel ?

    方案二 + babel

    方案三是在方案二的基础上借助 babel 插件后,写法可以如下:

    import { equal } from 'diana'
    

    .babelrc 里进行如下配置:

    // .babelrc
    {
      "plugins": [
        ["on-demand-loading", {"library": "diana"}]
      ]
    }
    

    此时打包体积如下:

    实际上,babel 插件 的作用是将 import { equal } from 'diana' 编译成 import equal from 'diana/lib/equal'

    babel 插件执行机制

    babel 执行三部曲如下:

    • 解析

    使用 babel-parse 将 JS 代码解析成 AST 树

    • 转换

    配合 babel-traverse 进行 AST 树的遍历,同时使用 babel-core 对外暴露的 transform 来调用相应插件来转化 AST 树

    babal.transform(code, {
      plugins: { pluginA, pluginB }
    })
    
    • 生成

    使用 babel-generator 将 AST 树转换回 JS 代码

    值得阅读的文章

  • 相关阅读:
    hlgoj 1766 Cubing
    Reverse Linked List
    String to Integer
    Bitwise AND of Numbers Range
    Best Time to Buy and Sell Stock III
    First Missing Positive
    Permutation Sequence
    Next Permutation
    Gray Code
    Number of Islands
  • 原文地址:https://www.cnblogs.com/MuYunyun/p/9615455.html
Copyright © 2011-2022 走看看