• webpack自身实现词法分析的JSTreeShaking
  • webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking

一、webpack词法分析的JSTreeShaking示例

示例测试的文件结构:

//工作区间
src//文件夹
index.js//主入口文件
demo.js//依赖模块
demo.html//测试用的结构文件
webpack.config.js//配置文件
package.json//包管理文件

主入口文件index.js:

import {a} from './demo';
console.log(a(), "hello");

依赖文件demo.js:注意依赖的lodash-se是被注释的!

 // import lodash from 'lodash-es';
var a = function(){
console.log('我是a');
}
var b = function(arg){
console.log(lodash.isArray(arg));
}
export{
a,
b
}

包管理文件package.json所依赖的包信息

"devDependencies": {
"lodash-es": "^4.17.11",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-deep-scope-plugin": "^1.6.1"
}

在注释依赖包中的lodash-es库的引用代码时,使用压缩打包模式的打包信息:

打包生成的mian.js只有900多字节的体积,接着来看解开lodash-es库引用后的打包信息(demo.js第一行取消注释后):

import lodash from 'lodash-es';

也就是在引用lodash-es库的情况下,打包mian.js的体积达到了85.9Kib。

这就是webpack的词法分析JS tree shaking,为什么说是词法分析呢?因为我在主入口文件中只引用了bemo.js的a函数,并没由引用b函数。由于webpack没有去分析作用域词法,它只从js文档词法分析上知道demo.js引用了lodash-es库,在打包生成mian.js时将lodash-es整个库打包进去了。

一、webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking

在前面的package.json中已经给出了webpack-depp-scope-plugin的插件依赖信息,也可以通过npm下载:

npm install webpack-deep-scope-plugin -D

然后再webpack.config.js中配置插件:

 const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
module.exports = {
plugins:[
new WebpackDeepScopeAnalysisPlugin()
]
}

配置好webpack-deep-scope-plugin后再使用压缩模式打包:

这次打包生成的mian.js只有1000字节,比之前的85.9kib小了太多了吧,这就是webpack-deep-scope-plugin对主入口文件index.js做了作用域词法分析,发现主入口文件index.js只引用了demo.js的a函数,就只给mian.js打包了a函数。假设同时再index.js中引用demo.js中的a、b函数呢?

import {a,b} from './sum';
console.log(a() + b([1,5,6,5,6,6,5,4]) + "hello");

以上是index.js同时依赖demo.js的a、b两个函数,而demo.js中的b函数又依赖lodash-es的isArray工具函数。

这时候也只有14.7kiB,远远低于之前的85.9kiB。这就是webpack-deep-scope-plugin同时针对demo.js中b函数引用的lodash-es做了深度作用域词法分析,剔除了大部分不相关的代码。注意这个压缩模式打包的代码最后测试报错,我用非压缩打包模式测试能正常打印结果,这个问题出在lodash-es的代码中,与webpack-deep-scope-plugin无关。

关联资源:

https://npmjs.com

https://lodashjs.com

JSTreeShaking的webpack-deep-scope-plugin插件的应用的更多相关文章

  1. webpack编写一个plugin插件

    插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...

  2. webpack(9)plugin插件功能的使用

    plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...

  3. Webpack学习-Plugin

    原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...

  4. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  5. 关于webpack 以及 webpack配置和常用插件的学习记录 (1)

    主要概念: Entry :   webpack的入口,构建的第一步从entry开始. Output :   输出,经过webpack处理后的得到最终想要的代码. Loader :   模块转换工具,把 ...

  6. webpack入门(四)——webpack loader 和plugin

    什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...

  7. 初探webpack之编写plugin

    初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...

  8. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  9. AS Gradle构建工具与Android plugin插件【大全】

    Android plugin version 与 gradle version 的关系 Gradle是一种构建工具,它通过编写一个名为build.gradle的脚本文件对项目进行设置,再根据这个脚本对 ...

  10. idea使用破解版mybatis plugin插件失败,idea打不开的解决方案

    记一次错误解决方案 打开 idea.vmoptions (Help -> Edit Custom VM Options...) ,在这里进行了修改 加了破解jar包的路径,但是之前的路径中有中文 ...

随机推荐

  1. Android 关于 CountDownTimer onTick() 倒计时不准确问题源码分析

    一.问题 CountDownTimer 使用比较简单,设置 5 秒的倒计时,间隔为 1 秒. final String TAG = "CountDownTimer"; * , ) ...

  2. SCM是什么?

    答: 全称为Software Configuration Management,即为软件配置管理

  3. nfs服务共享,解决文件没有权限访问问题

    最近在了解一些服务权限的设置,突然就被这个nfs服务的权限给绊住了.当你挂载上服务器上的共享目录 时,却无法访问里面的一些内容.内心满满的忧桑...经过努力奋斗几分钟终于搞明白了. 无法访问的原因:因 ...

  4. Eclipse取消汉化以及设置语言的方法

    Eclipse取消汉化以及设置语言的方法 转 https://jingyan.baidu.com/article/11c17a2c2c1939f446e39d13.html Eclipse下载以后都是 ...

  5. 准确率(Precision)、召回率(Recall)以及综合评价指标(F1-Measure)

    在信息检索和自然语言处理中经常会使用这些参数,下面简单介绍如下: 准确率与召回率(Precision & Recall) 我们先看下面这张图来加深对概念的理解,然后再具体分析.其中,用P代表P ...

  6. 【数学建模】线性规划各种问题的Python调包方法

    关键词:Python.调包.线性规划.指派问题.运输问题.pulp.混合整数线性规划(MILP) 注:此文章是线性规划的调包实现,具体步骤原理请搜索具体解法.   本文章的各个问题可能会采用多种调用方 ...

  7. Newlifex修仙(一) 超级配置文件

    新生命团队基础框架X组件,包括日志.数据库.网络.RPC.序列化.缓存.Windows服务.多线程等模块,支持.Net Framework/.netstandard/Mono. 说道配置文件,大家觉得 ...

  8. 2019 Unreal Open Day —— 英特尔携手 UE 助力游戏开发生态建设

    2019 年 5 月 8 日-5 月 9 日,一年一度的 Unreal Open Day 虚幻引擎技术开放日在上海举办,该活动由 Epic Games 中国倾力打造,是面向虚幻引擎开发者规格最高.规模 ...

  9. kubeadm快速安装k8s

    1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@localhost ~]# systemc ...

  10. layui 时间选择器 不要秒的选项

    通过修改 CSS 样式可以隐藏秒的选项 ++ .laydate-time-list{padding-bottom:0;overflow:hidden} .laydate-time-list>li ...