babel / babel/minify

[Bug]: The code cannot be minimized. There are two references

Open
#1,048 2 comments 0 reactions 0 assignees View on GitHub
i: needs triage
Dominant language
JavaScript
Stars
4.4k
Forks
217
PR merge metrics
No merged PRs in 30d

Description

### 💻

- [ ] Would you like to work on a fix?

### How are you using Babel?

babel-loader (webpack)

### Input code

Below is an example.
```

var babel = require('@babel/core');

var code = `
function baz() {
const pageSource = 'pageSource';
const clientType = 0;
const isNavBack = true;
const route = \`/pages/a/index?pageSource=\${pageSource}&clientType=\${clientType}&isNavBack=\${isNavBack}\`;

React.api.navigateTo({
url: route
});
}
`

const result = babel.transform(code, {
configFile: false,
babelrc: false,
comments: false,
ast: true,
sourceMaps: false,
plugins: [
[ require('@babel/plugin-transform-template-literals'), { loose: true }],
["minify-dead-code-elimination"],

]
});
console.log(result.code);
```

**Be careful, To comment out node_modules/babel-plugin-minify-dead-code-elimination/lib/index.js (traverse.clearCache ||) traverse.cache.clear)();**

### Current and expected behavior

The current performance is:
```
function baz() {
const pageSource = 'pageSource';
const clientType = 0;
const isNavBack = true;
React.api.navigateTo({
url: "/pages/a/index?pageSource=" + pageSource + "&clientType=" + clientType + "&isNavBack=" + isNavBack
});
}
```

And here's what I was hoping for:
```
function baz() {
React.api.navigateTo({
url: "/pages/a/index?pageSource=" + "pageSource" + "&clientType=" + 0 + "&isNavBack=" + true
});
}
```

After checking, it is found that @babel/plugin-transform-template-literals causes the number of references to be 2 when minify-dead-code-elimination plug-in is running, so it cannot be minimized. Is there any way to solve this problem

### Environment

babel/core: 7.22.9

### Possible solution

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the provided @babel/core transform using @babel/plugin-transform-template-literals and minify-dead-code-elimination. Start in node_modules/babel-plugin-minify-dead-code-elimination/lib/index.js around the traverse cache-clearing call, then compare the generated output with the expected version. Done means the constants are folded without breaking minification.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.