electron-forge 开启 tree-shaking

JavaScript
2023-02-01 08:51

electron-forge 默认配置不能 tree-shaking, 如果在使用第三方库时，可能会错误的引入整个入口文件，导致应用启动极慢。

目前我所知道有两种 tree-shaking 方法

  1. webpack tree-shaking
  2. babel-plugin-import 按需导入

本文讨论 webpack tree-shaking 实现

webpack tree-shaking 需要模块为 es6 语法（import/export），但 electron-forge 默认模板的 ts 配置会把 ESModule 转译为 commonJS，导致 webpack tree-shaking 无效。

那么问题就很简单了，只需要调整 ts-loader 配置，让其输出 esmodule 即可，配置如下：

{
  test: /\.tsx?$/,
  exclude: /(node_modules|\.webpack)/,
  use: {
    loader: "ts-loader",
    options: {
      transpileOnly: true,
      compilerOptions: {
        module: "es6",            // <- HERE
      },
    },
  },
},

至于为什么不直接修改 tsconfig.json, 这个我尝试过，会无法启动，等有空再研究一下。

验证码