Application JSTreeShaking of webpack-deep-scope-plugin plugin

webpack itself implements lexical analysis JSTreeShaking
webpack-depp-scope-plugin plugin implements the scope of the analysis JSTreeShaking

A, JSTreeShaking example webpack lexical analysis

Sample test file structure:

// working interval 
    the src // folder 
        The index.js // main entry file 
        demo.js // dependent module 
    demo.html // configuration file used for testing 
    webpack.config.js // profile 
    package.json // package management file

The main entrance file index.js:

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

Dependencies demo.js: Note dependent lodash-se is a comment!

 1 // import lodash from 'lodash-es';
 2 var a = function(){
 3     console.log('我是a');
 4 }
 5 var b = function(arg){
 6     console.log(lodash.isArray(arg));
 7 }
 8 export{
 9     a,
10     b
11 }

Package management file package.json depends package information

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

Note the reference code when dependent lodash-es library package, the package information packaged using compressed mode:

Packing generated mian.js volume only 900 bytes, and then look to unlock the package information (first row demo.js Cancel Note) the library reference lodash-es:

import lodash from 'Lods-S';

I.e. in the case where the reference lodash-es library, packaged mian.js volume reached 85.9Kib.

This is webpack lexical analysis JS tree shaking, why is the lexical analysis? Because I only quoted bemo.js function of a file in the main entrance, it did not function by the reference b. Since webpack lexical scoping analysis did not go, you just know demo.js quoted lodash-es library in the package generated mian.js will lodash-es packed into the entire library from the document js lexical analysis.

A, webpack-depp-scope-plugin plugin implements JSTreeShaking scope of analysis

In the foregoing has been given package.json webpack-depp-scope-plugin plug-dependent information may be downloaded from npm:

npm install webpack-deep-scope-plugin -D

Then webpack.config.js configure plug-ins:

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

Configured webpack-deep-scope-plugin package before use compression mode:

The package generated mian.js only 1000 bytes, much smaller than the previous 85.9kib it, this is webpack-deep-scope-plugin file to the main entrance of scope index.js do lexical analysis, found that the main inlet documents cited only demo.js index.js of a function, it is only to a packed mian.js function. Index.js assume the same time and then referenced demo.js in a, b function?

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

These are also depends demo.js index.js a, b of the two functions, while demo.js b in turn depends on the function of lodash-es isArray utility functions.

这时候也只有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