Skip to content

使用 esbuid-loader 提高前端代码的编译速度 #7525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Mar 2, 2023
Merged

使用 esbuid-loader 提高前端代码的编译速度 #7525

merged 3 commits into from
Mar 2, 2023
+306 −71

Conversation

yb6b
Copy link
Contributor

@yb6b yb6b commented Feb 28, 2023

修改了 package.json 和 几个 webpack.*.js 文件。添加esbuild-loader提升打包速度。

@yb6b yb6b mentioned this pull request Feb 28, 2023
Closed
@Soltus
Copy link
Contributor

Soltus commented Feb 28, 2023

已在汐洛分支测试通过，感谢你的贡献。
已知的一个副作用导致调试追踪变得困难，不混淆函数名是否可行？
下图展示了副作用的效果：
image

@yb6b
Copy link
Contributor Author

yb6b commented Feb 28, 2023

谢谢大神的指点，改好了。

@Soltus
Copy link
Contributor

Soltus commented Feb 28, 2023

minify 是压缩选项，根据 esbuild 文档，避免重命名应当使用 --keep-names 参数，对应的 esbuild-loader 配置应当如下：

{
  loader: "esbuild-loader",
    options: {
      minify: false,
      keepNames: true,
    }
}

image

@88250 88250 requested a review from Vanessa219 March 1, 2023 00:38
@88250 88250 changed the title 用esbuild-loader加快打包速度 使用 esbuid-loader 提高前端代码的编译速度 Mar 1, 2023
@88250 88250 added the Refactor label Mar 1, 2023
Vanessa219
Vanessa219 reviewed Mar 1, 2023
View reviewed changes
app/webpack.export.js
@@ -4,7 +4,7 @@ const pkg = require("./package.json");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const TerserPlugin = require("terser-webpack-plugin");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

webpack.api.js 还没有修改，修改后 package.json 可对应移除

Vanessa219
Vanessa219 reviewed Mar 1, 2023
View reviewed changes
app/webpack.desktop.js Outdated
@@ -54,27 +47,18 @@ module.exports = (env, argv) => {
test: /\.js$/,
include: [path.resolve(__dirname, "src/asset/pdf")],
use: {
loader: "babel-loader",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段是为了支持 iPad 中 PDF 正常显示，这样使用确定没有问题么？

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

谢谢V姐提醒，我没有设备，所有改回babel-loader了。

不过每次都要编译一遍 pdf.js，每次都多花7秒，是否可以提前编译它，避免转换？

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是需要修改的，不需要修改的会放在 stage 里面，没有改动的话应该是不会进行再次编译的。
稍后我看一下吧，可以的话我再改回去。

@Vanessa219 Vanessa219 merged commit b649a70 into siyuan-note:dev Mar 2, 2023
@Vanessa219 Vanessa219 added this to the 2.7.8 milestone Mar 2, 2023
@Vanessa219
Copy link
Member

Vanessa219 commented Mar 2, 2023 •
edited
Loading

已在汐洛分支测试通过，感谢你的贡献。 已知的一个副作用导致调试追踪变得困难，不混淆函数名是否可行？ 下图展示了副作用的效果： image

图片里面的东东是怎么弄出来的？这个应该弄成变量的，但是测了一下没啥感觉 🤦‍♀️

minify: argv.mode === "production",
keepNames: argv.mode !== "production",

Vanessa219 added a commit that referenced this pull request Mar 2, 2023
@Vanessa219
♻️ #7525
a23fcd6
Vanessa219 added a commit that referenced this pull request Mar 2, 2023
@Vanessa219
♻️ #7525
b28e567
@Soltus
Copy link
Contributor

Soltus commented Mar 2, 2023

已在汐洛分支测试通过，感谢你的贡献。 已知的一个副作用导致调试追踪变得困难，不混淆函数名是否可行？ 下图展示了副作用的效果： image

图片里面的东东是怎么弄出来的？这个应该弄成变量的，但是测了一下没啥感觉 woman_facepalming

minify: argv.mode === "production",
keepNames: argv.mode !== "production",

https://github.com/Hi-Windom/Sillot/blob/b9044515a3ee46e6841535dbbda7f834e7840845/app/src/sillot/util/sout.ts#L137
图片中的效果是通过主动引发异常获得调用函数名。混淆名称并不会获得明显的性能提升，至少在app端我觉得没有必要。

@Soltus Soltus mentioned this pull request Mar 2, 2023
Closed
@Vanessa219
Copy link
Member

@Soltus 我看调试里面没有对函数名进行缩写，esbuild-loader 里面的配置项也没有 keepNames 这个配置项。
image

@Soltus
Copy link
Contributor

Soltus commented Mar 3, 2023

@Soltus 我看调试里面没有对函数名进行缩写，esbuild-loader 里面的配置项也没有 keepNames 这个配置项。 image

image
就在minify的上面https://esbuild.github.io/api/#keep-names
transform 的配置都是esbuild-loader支持的
我不清楚这些配置放在 loader 和 plugin 的区别，经测试都是有效的

@Vanessa219
Copy link
Member

又检查了下，build 的时候走 optimization，keepNames 就没有必要为 true 了。dev 的时候不走 optimization，就不会替换名字。目前 dev 分之应该是不用修改了。

@Soltus
Copy link
Contributor

Soltus commented Mar 6, 2023

又检查了下，build 的时候走 optimization，keepNames 就没有必要为 true 了。dev 的时候不走 optimization，就不会替换名字。目前 dev 分之应该是不用修改了。

可以。思源没必要 keepNames ，我在自己的分支实现了。

@iamqiz
Copy link
Contributor

iamqiz commented Mar 11, 2023

这个牛! 速度起飞了

@88250 88250 mentioned this pull request Mar 14, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Vanessa219 Vanessa219

Assignees

@Vanessa219 Vanessa219

@yb6b yb6b

@Soltus Soltus

Labels
Refactor
Projects
None yet
Milestone
2.7.8
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@yb6b @Soltus @Vanessa219 @iamqiz @88250