vincentdchan / webpack-deep-scope-analysis-plugin

A webpack plugin for deep scope analysis

Webpack Deep Scope Analysis Plugin

This project is not maintained.

TLDR: This plugin will break your code, please use webpack5 instead.

This plugin can not work perfectly with webpack4. It will break your code in some cases. Webpack5 covers all the features implemented by this plugin, using wepback5 is a wise choice.

The reason according to sokra:

With DependencyReference returning null you prevent the module to be part of the chunk, but the Dependency doesn't know about that and always generates code to reference the module and try to load it at runtime. But there is no way to tell the Dependency that.

A webpack plugin for deep scope analysis. It's a project of GSoC 2018 webpack organization.

It's a plugin to improve tree-shaking. It can make webpack eliminate the unused imports related to the unused exports. It solves the issue 6254 for webpack.

Student: @Vincent Mentor: @Tobias

Demo: https://vincentdchan.github.io/webpack-deep-scope-demo/

Install

Install the plugin:

$ yarn add webpack-deep-scope-plugin

Require

• Node.js 8 +
• webpack 4.14.0 +

Usage

Enable the plugin in webpack.config.js:

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

module.exports = {
  ...,
  plugins: [
    ...,
    new WebpackDeepScopeAnalysisPlugin(),
  ],
}

Notice: the plugin only works for import and export syntax module. If your code are transpiled to module.export and require syntax, the analyzer can't work correctly.

The plugin will analyze the scope and determine if the variables should be imported automatically.

Articles

Medium

中文版

Pure Annotation

As you know, it's difficult for ECMAScript to analyze the side effects. Hence, PURE annotation is introduced, which is from Uglify:

A function call is marked as "pure" if a comment annotation /*@__PURE__*/ or /*#__PURE__*/ immediately precedes the call. For example: /*@__PURE__*/foo();

Changelog

v1.7.0

• Fix: #10

v1.6.1

• Upgrade tslint for security issue
• Fix: #12 : Add README to npm

v1.6.0

• rename package webpack-deep-scope-analysis to deep-scope-analyser, which is published as a new npm package. It's aimed to be a standalone analyser.

v1.5.4

• Fix #7: import * from 'xxx' syntax

v1.5.3

• Fix #5

v1.5.2

• Improve performance and code quality

v1.5.0

• Introduce VirtualScope to simulate module variable

v1.4.0

• Fix #4
• Publish

Contributing

Use lerna to build and test:

$ lerna run build
$ lerna run tslint
$ lerna run test

About Escope

Now the src/ includes a Typescript version of escope, because the plugin needs some internal changes of the escope manager. So I didn't import the escope directly.

When the plugin is nearly finished, I will make some PRs to the original escope repo.

webpack-deep-scope-analysis-plugin's Issues

Plugin fails on dynamic imports

Using dynamic imports like

import(/* webpackChunkName: "login" */ './login/LoginPage')

causes the plugin to break. It throws with:

ERROR in ./src/Index.ts
Module parse failed: Unknown node type Import.
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
Error: Unknown node type Import.
    at Controller.traverse (.../node_modules/estraverse/estraverse.js:454:31)
    at Object.traverse (.../node_modules/estraverse/estraverse.js:646:27)
    at VariableVirtualScope.traversePureDeclarator (.../node_modules/deep-scope-analyser/lib/analyser/virtualScope/variableVirtualScope.js:96:20)
    at VariableVirtualScope.findAllReferencesToVirtualScope (.../node_modules/deep-scope-analyser/lib/analyser/virtualScope/variableVirtualScope.js:44:22)
    at ...node_modules/deep-scope-analyser/lib/analyser/moduleAnalyser.js:139:45
    at Array.forEach (<anonymous>)

Cannot read property 'call' of undefined

webpack-deep-scope-plugin 1.6.2
webpack 4.40.2

module-a.js

import lodash from 'lodash-es'

export * from './module-b'

export const func1 = function(value) {
  return lodash.isArray(value)
}

export const func2 = function() {
  console.log('这是func2')
  return 123123
}

export const func3 = () => {
  console.log('B模块的func3方法')
}

index.js

import { func2 } from './module-a'

func2()

webpack.config.js

const path = require('path')
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin')
  .default
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //   mode: 'development',
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.bundle.js',
  },
  plugins: [
    new WebpackDeepScopeAnalysisPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
    }),
  ],
}

这个插件会影响路由懒加载&动态import的使用吗？

我在本地配置了Vue路由懒加载和webpack的代码分割，但是只要一启用这个插件发现我的配置根本就不会起作用，组件并没有打包进来分割也没有生效，关闭这个插件就又正常了

Please upgrade to Webpack 5

the current version is not compatible with Webpack 5

README not found on NPM

Your package has no README on npmjs.com https://www.npmjs.com/package/webpack-deep-scope-plugin

应该是module.exports而不是module.export

const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

// module.export = { 这句有问题，直接复制后没有生效也没有报错，但插件就是没有生效
module.exports = {
  ...,
  plugins: [
    ...,
    new WebpackDeepScopeAnalysisPlugin(),
  ],
}

Cannot read property 'generateExportInfo' of undefined

Hey, I tried your plugin in a simple demo and it works well. Now I want to apply it to my team project which is much bigger. Then it failed and throw this error.

Here is the environment:
Node v8.11.3
webpack v4.17.1

Here are part of used plugins:

new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HashedModuleIdsPlugin(),
new WebpackDeepScopeAnalysisPlugin()

I can't figure out if it is my mistake or a bug of this plugin.

打包后出现语法错误

如上图
使用webpack-deep-scope-plugin插件打包后，本应该自运行函数，然而编译成了函数表达式，导致语法错误，tsconfig.json文件的target设置为es6

[Question] Is this works with import - exports files?

I have big index file (autogenerated).

export EditCategory from 'src/admin/categories/EditCategory.vue'
export ConfigurationAdmin from 'src/admin/ConfigurationAdmin.vue'
export CypherSecrets from 'src/admin/CypherSecrets.vue'
export DeletedElements from 'src/admin/DeletedElements.vue'
export ImagesCleaner from 'src/admin/ImagesCleaner.vue'
export CreateMenuItem from 'src/admin/menuItems/CreateMenuItem.vue'
export EditMenuItem from 'src/admin/menuItems/EditMenuItem.vue'
...

Trying to use you plugin to allow separate chanks works.
I am not sure will webpack-deep-scope-analysis-plugin works with such files?
For now for my try all chunks loads at start. So or my code is not good, or plugin can not work with such index files.

I am using exportDefaultFrom babel plugin.

module.exports = {
  presets: [
    '@quasar/babel-preset-app',
    [
      "babel-preset-proposals",
      {
        "optionalChaining": true,
        "nullishCoalescingOperator": true,
        "exportDefaultFrom": true
      }
    ]
  ]
};

when i use this plugins, webpack-deep-scope-analysis-plugin did not reduce the size of the lodash-es library.

bundle package raise error Uncaught TypeError: (void 0) is not a function

hi:
I try to use this plugin to reduce final bundle size, but some modules not shaking correctly. I have installed react-beautiful-dnd base on create-react-app. And only import the module in index.js and change one line of code:

import { Draggable, Droppable, DragDropContext } from "react-beautiful-dnd";
ReactDOM.render(<DragDropContext onDragEnd={()=>{}}>, document.getElementById('root'));

the final bundle raise error
Uncaught TypeError: (void 0) is not a function.

could you please have a look. I have create a repo : https://github.com/jiawang1/test-webpack-plugin

Jay

Does this plugin also eliminate child unused modules/functions from reexports?

I've put up a small example of this issue up at https://github.com/kgrz/webpack-side-effect-loading

In there, the polyfill.js file imports modules from files {a,b,c}.js and reexports them. The entry file entry-import-from-reexport.js imports the functions from polyfill.js, as opposed to directly from {b,c}.js, and this creates a bundle that includes React as is, compared to the entry-import-directly.js file which won't contain React.

1. My question is, is this plugin intended to avoid such unused function bundling? This structure is quite similar to the example in your blog post, but may be I'm missing a caveat.
2. Perhaps this is harder because React is a CJS module? We had this issue with a ES module as a second-level import (Think a React component imported in a.js which is exported as an ESM, however, one that imports React on its own)[1]. I tried reducing the problem down in this repo to demonstrate my understanding after reading the tree-shaking and module concatenation docs in webpack.
3. Or perhaps there's a different reason due to which this is not possible?

I just wanted to see if this is not actually a bug in the plugin itself.

1: Not sure if this makes any sense with that example :|

PS: I must say, this is one of the best webpack plugins to read code, especially the choice to have two separate packages for the main logic and the plugin itself. Thank you!

PPS: I checked out the tests, and from what I gather, writing a test to simulate this multi-file import is not straight forward using the harness you have right now? Because it looks like you're parsing the code and not actually loading the imports mentioned in the test fixtures. Any other way to write a test case if this behaviour indeed is a bug?

This has been integrated into webpack 5 available as `optimization.innerGraph`, enabled by default in production

This has been integrated into webpack 5 available as optimization.innerGraph, enabled by default in production

Originally posted by @sokra in #25 (comment)

"Cannot read property 'call' of undefined" in bootstrap

Hi,

I'm trying to use the plugin, but when running it I get an exception in the bootstrap process.
The relevant function is:

 	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); --->>> Exception is thrown here.

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}

The module is missing.
The function is called because of import isPlainObject from 'lodash-es/isPlainObject';
Which if following the stack is referenced somewhere in the "react-redux" module

I use UglifyJsPlugin with dead code elimination and HashedModuleIdsPlugin, but they are not the problem, as I get the error even when removing them.

Would appreciate any help

Thanks

JavaScript heap out of memory

Getting the following error. The project I'm working with includes the @arcgis/webpack-plugin (which includes the dojo webpack plugin as well). If I comment out the @arcgis/webpack-plugin, I don't run into the error.

[10640:0000020CC46D93B0]    87515 ms: Scavenge 1260.1 (1349.9) -> 1259.5 (1355.4) MB, 7.6 / 0.0 ms  (average mu = 0.168, current mu = 0.158) allocation failure
[10640:0000020CC46D93B0]    87670 ms: Scavenge 1263.4 (1355.4) -> 1263.2 (1355.4) MB, 7.4 / 0.0 ms  (average mu = 0.168, current mu = 0.158) allocation failure
[10640:0000020CC46D93B0]    87689 ms: Scavenge 1263.4 (1355.4) -> 1262.7 (1367.4) MB, 10.8 / 0.0 ms  (average mu = 0.168, current mu = 0.158) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 000003A7C0F5C5C1]
Security context: 0x0056cb71e6e1 <JSObject>
    1: _addListener(aka _addListener) [000003FBDD61D4E9] [events.js:~193] [pc=000003A7C22223EC](this=0x02ea374026f1 <undefined>,target=0x0090982075e1 <Gzip map = 000002DD35A44BF9>,type=0x0056cb73ce89 <String[3]: end>,listener=0x009098207d21 <JSBoundFunction (BoundTargetFunction 000003FBDD61D529)>,prepend=0x02ea374029a1 <false>)
    2: constructor(aka Zlib)...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF66FDFACB5
 2: 00007FF66FDD44E6
 3: 00007FF66FDD4EF0
 4: 00007FF6700647FE
 5: 00007FF67006472F
 6: 00007FF670598964
 7: 00007FF67058F0F2
 8: 00007FF67058D68C
 9: 00007FF67058BFB7
10: 00007FF6703B5E74
11: 00007FF6701D8427
12: 000003A7C0F5C5C1

Error on build -- * is not an export variable

Hi, I was trying this out on my OSS GitLens project and am getting the following error. I'm not sure what file/import/export is causing this. Any ideas?

C:\Users\Eric\code\vscode-gitlens\node_modules\webpack-deep-scope-analysis\lib\analyser\moduleAnalyser.js:145
                throw new Error(`${usedExport} is not an export variable`);
                ^

Error: Commands is not an export variable
    at ModuleAnalyser.generateExportInfo (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack-deep-scope-analysis\lib\analyser\moduleAnalyser.js:145:23)
    at compilation.hooks.dependencyReference.tap (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack-deep-scope-plugin\index.js:34:56)
    at SyncWaterfallHook.eval [as call] (eval at create (C:\Users\Eric\code\vscode-gitlens\node_modules\tapable\lib\HookCodeFactory.js:17:12), <anonymous>:7:16)
    at Compilation.getDependencyReference (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\Compilation.js:1474:41)
    at processDependency (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:80:37)
    at processDependenciesBlock (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:67:8)
    at compilation.hooks.optimizeDependencies.tap.modules (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:109:7)
    at SyncBailHook.eval [as call] (eval at create (C:\Users\Eric\code\vscode-gitlens\node_modules\tapable\lib\HookCodeFactory.js:17:12), <anonymous>:13:16)
    at SyncBailHook.lazyCompileHook [as _call] (C:\Users\Eric\code\vscode-gitlens\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\Compilation.js:1162:36)
    at hooks.make.callAsync.err (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\Compiler.js:547:17)
    at _err0 (eval at create (C:\Users\Eric\code\vscode-gitlens\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\Compilation.js:1064:12)
    at processModuleDependencies.err (C:\Users\Eric\code\vscode-gitlens\node_modules\webpack\lib\Compilation.js:980:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

sorry, II was getting an error when using with webpack 5

sorry, II was getting an error when using with webpack 5

Originally posted by @budarin in #25 (comment)

What's the latest version?

On Github the latest release is version 1.6.1 but on Yarn is 1.6.2. Am I missing anything?
Thanks!

Github:
https://github.com/vincentdchan/webpack-deep-scope-analysis-plugin/releases

Yarn:
https://yarnpkg.com/package/webpack-deep-scope-plugin

Breaks on Angular applications

Hi there,

I was trying out this plugin in an Angular app and it seems it breaks some of the imports there.

I'm not sure what's going wrong but tried to prepare the simplest repro possible:

git clone https://github.com/filipesilva/angular-deep-scope
cd angular-deep-scope
npm install
npm run ngc
npm serve

Note: the npm run ngc compiles the typescript files in AOT mode for Angular. You only need to run this once really.

After serving you can go to http://localhost:8080/ and you should see an error. If you remove the new WebpackDeepScopeAnalysisPlugin(), line from webpack.config.js (and restart the server) the error goes away and you should see a Hello World message.

The error is:

app.component.ngfactory.js:10 Uncaught TypeError: undefined is not a function
    at Module.<anonymous> (app.component.ngfactory.js:10)
    at __webpack_require__ (bootstrap:724)
    at fn (bootstrap:101)
    at Object.window.__webpackHotClient__ (main.js:21153)
    at __webpack_require__ (bootstrap:724)
    at bootstrap:791
    at bootstrap:791

It seems to be in this line:

// src/app.component.ngfactory.js
var RenderType_AppComponent = i0.ɵcrt({ encapsulation: 2, styles: styles_AppComponent, data: {} });

When WebpackDeepScopeAnalysisPlugin is present, this line is transformed into:

var RenderType_AppComponent = /* unused reexport */undefined({ encapsulation: 2, styles: styles_AppComponent, data: {} });

Since i0.ɵcrt() is transformed into undefined() the app fails at runtime.

I'm not sure why that transformation happens but if I can help further let me know.