zoukankan      html  css  js  c++  java
  • Tree Shaking

    tree shaking会将树中没有连结的老旧枝干剔除掉。

     

     

    如何进行treeShaking

     

     

     

    目标:

    1.告诉webpack代码没有副作用,可以安全被prune。

    2.webpack内部对代码使用terserPlugin检测没有被使用的exports

     

     

     

     

    1.在package.json中添加sideEffects字段

     

     

     

      如果代码没有side effects 那么我们就能安全的prune那些未使用的exports。(也可以传入一个数组,来指明有sideEffects的文件

     

     

     

     

     

    “side effect”是指当被引入的时候产生特殊行为,而不是通过export出内容来供人使用的那些库。

    一个例子是 polyfills,影响了全局作用域并且通常没有export(这些polyfills因为没有export理应会被tree shaking过程剔除掉,但这些代码会造成side effect的,有他们特殊的用处,所以我们不能剔除他们,)

     

     

     

     

     

    区分Optimiziation选项中的 tree shaking 和sideEffects

     

     

     

     因为人们在使用上经常有些误解,optimization中的 sideEffects和 tree shaking到底有什么区别,是不是一个东西,为什么tree shaking要先标记 side effect, 下面会进行讲解:

     

    optimizaion中的sideEffects和检测usedExports(通常被认为是treeShaking) 是两个不同的选项,

     

    https://webpack.js.org/configuration/optimization/#optimizationusedexports 

    https://webpack.js.org/configuration/optimization/#optimizationsideeffects

    sideEffect数组被标记后,它会skip被标记的整个module/files和子树

    而usedExports依赖于terserPlugin,这是实现tree shaking的选项

     

     

     

    (默认情况下 usedExports是开启的,会默认开启tree shaking)

     

     

    结论:

    为了使用tree shaking,你必须:

    1.使用es2015语法 import 和 export (tree shaking relies on the static structure of ES2015 module syntax, https://exploringjs.com/es6/ch_modules.html#static-module-structure

     

    ...Reason #3 will remain compelling. It can only be achieved with a module format that has a static structure....

    )

    2.保证没有把你es2015 module语法转为CommonJS module的插件,

    2.在package.json中添加sideEffects:false

    4.使用生产模式(会自动开启那些插件

     

  • 相关阅读:
    zoj 2110
    zoj 2376 Ants
    zoj 2256 Mincost
    企业版app在iOS8上无法安装的几个问题解决
    源码推荐(8.05):一行代码实现多风格的推送小红点,效果很好的跑马灯
    iOS在支持arc的工程中,导入不支持arc的第三方的插件
    一个异步加载图片的公用类: EGOImageLoading
    一款轻量级的 iOS 图像缓存
    UIGestureRecognizer学习笔记
    IOS两个App应用之间的跳转
  • 原文地址:https://www.cnblogs.com/eret9616/p/11886625.html
Copyright © 2011-2022 走看看