如何使用 webpack 构建/编译 firebase 云函数

Question

我正在使用 webpack 来构建我的云函数（有几个原因，如路径别名、typescript 和其他一些配置）

我有我的index.ts文件以及包含每个 function 的单独文件的src文件夹。

我的index.ts文件然后像这样导出它们

import admin from 'firebase-admin';

admin.initializeApp();

export const func1 = require('./src/func1').default;
export const func2 = require('./src/func2').default;

与tsc之类的东西相比，webpack 的问题在于它需要所需文件中的所有代码并将其捆绑在索引文件中，由于冷启动性能，这对于云函数来说并不理想。

将这些文件拆分成单独的文件并确保良好的冷启动性能的正确方法是什么（即只需要调用 function 的代码）。

我的 webpack firebase 配置如下所示

const config = {
  entry: {
    index: path.resolve(__dirname, './index.ts')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    libraryTarget: 'commonjs'
  },
  mode: 'production',
  optimization: {
    nodeEnv: 'production',
    splitChunks: {
      chunks: 'all'
    },
    minimize: true,
    minimizer: [
      new ESBuildMinifyPlugin({
        target: 'es2020',
        minifyWhitespace: true,
        minifyIdentifiers: true,
        minifySyntax: true
      })
    ]
  },
  resolve: {
    alias: {
      $tools: path.resolve(__dirname, '../../tools'),
      $types: path.resolve(__dirname, '../../types')
    },
    extensions: ['.tsx', '.ts', '.js', '.mjs', '.json']
  },
  externals: ['firebase-functions', 'firebase-admin'],
  target: 'node',
  module: {
    rules: [
      {
        test: /\.(m?js|ts)$/u,
        exclude: /(node_modules)$/u,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'ts',
            target: 'es2020',
            tsconfigRaw: require('./tsconfig.json')
          }
        }
      }
    ]
  },
  plugins: [new CleanWebpackPlugin(), new ESBuildPlugin()]
};

Answer 1

这是我能够烹制的解决方案。

首先，让每个 function 在 webpack 中都有自己的条目，您可以手动或通过类似这样的方式进行

const fs = require('fs');
const path = require('path');

// Get all functions and store their names in an array, based on filename, use .js instead of .ts if thats your case
const functions = fs.readdirSync('./src').map(file => file.split('.ts')[0]);

// Add all functions to entries object
const entries = {};
functions.forEach(file => {
  entries[file] = path.resolve(__dirname, `src/${file}.ts`);
});

// Finally add your index file to entries object (if it is not already in src folder together with functions)
entries.index = path.resolve(__dirname, './index.ts');

// Use this in your webpack congig
const config = {
 entry: entries,
 // ...
}

这将导致这样的结果

dist/
  func1.js
  func2.js
  index.js

然后在你的索引文件中使用non_webpack_require ，这样 webpack 在编译代码中将它们保持为require() 。 导出所有函数，请记住每个文件都位于已编译文件夹的根目录中。

import admin from 'firebase-admin';

admin.initializeApp();

export const func1 = __non_webpack_require__('./func1');
export const func2 = __non_webpack_require__('./func2');

Answer 2

webpack的原理是对JS进行改造优化，将其最小化打包成一个文件（以浏览器下载优化为例，不在此列）。

在您的情况下，您只有 1 个入口点。 Webpack 会跟随所有的依赖包到同一个文件中。

这里的解决方案是有 2 个单独/独立的入口点，这样你将有 2 个 output 文件。 但有时这样做很无聊，因为您想共享代码/初始化的某些部分。 这总是一个权衡的问题