TypeScript Lerna/MonoRepo Webpack 开发速度/优化答案

【问题标题】：TypeScript Lerna/MonoRepo Webpack development speed/optimizationTypeScript Lerna/MonoRepo Webpack 开发速度/优化
【发布时间】：2019-04-27 12:57:47
【问题描述】：

在将 lerna 用于带有 webpack 的 TypeScript 项目时，我正在尝试在库中发生开发更改时优化 webpack 速度。现在，当库中的代码发生变化时，重新编译需要 1m+ 时间。

目录结构：

lerna.json
packages/main-project/webpack.config.js
packages/main-project/node_modules/library   (<--symlink via lerna)
packages/library/webpack.config.js

当您在根目录中运行 lerna run dev --parallel 时，它会在 main-project 和 library 上并行启动 webpack。使用默认设置，会发生以下情况：

library webpack 编译大约需要 7-8 秒
main-project webpack 将 packages/main-project/node_modules/library/dist/index.js 文件重新编译成 library.[hash].js 大约需要 1m+ 左右
HMR 重新加载网页

我想要完成的是：

只需包含library/dist/index.js（通过node_modules/library 或../library 路径）
当路径改变时，HMR 会重新加载

我需要帮助的是：

如何告诉main-project/webpack.config.js 在库更改时忽略node_modules/library 并且不重新编译
让主项目导入已构建的library/dist/index.js
确保 HMR 在库更改时检测到

下面的配置几乎有效。如果library/dist/index.js 发生变化，它所缺少的只是 HRM 重新加载：

const path = require("path");
const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = (env, argv) => {
    return {
        name: "development",
        devtool: "cheap-module-source-map",
        entry: {
            'index': './src/index.tsx',
            'style': './src/scss/themes/default.scss',
            'library': ['../library/dist/index.js']
        },
        module: {
            rules: [
                {
                    test: /node_modules[\/\\]\\?(library).+\.js$/,
                    enforce: "pre",
                    use: ["source-map-loader"],
                }, {
                    test: /\.tsx?$/,
                    include: path.resolve(__dirname, 'src'),
                    use: [
                        {
                            loader:  "ts-loader",
                            options: {
                                transpileOnly:        true,
                                experimentalWatchApi: true,
                            },
                        }
                    ],
                }, {
                    test: /library[\/\\]dist[\/\\]$/,
                    use: ['file-loader']
                }
            ],
        },
        optimization: {
            minimize: false,
            removeAvailableModules: false,
            removeEmptyChunks: false,
            splitChunks: {
                cacheGroups: {
                    "library": {
                        name: "library",
                        test: /..[\/\\]library/,
                        priority: 10,
                    },
                    vendor: {
                        name: "vendor",
                        test: /node_modules[\/\\](?!(library))/,
                        priority: 20,
                    },
                },
            },
        },
        output: {
            pathinfo: false,
        },
        plugins: [],
        resolve: {
            symlinks: false,
            modules:[path.resolve(__dirname, 'src'), 'node_modules'],
            alias: {
                'library': path.resolve(__dirname, 'node_modules/library'),
            }
        },
        watchOptions: {
            aggregateTimeout: 3000,
            ignored : path.resolve(__dirname, 'node_modules/library'),
        },
    };
};

【问题讨论】：

你有办法让 Webpack 检测库何时发生变化吗？

标签： typescript webpack lerna monorepo

【解决方案1】：

你可以看看这个 repo 以获得一些灵感https://github.com/dan-kez/lerna-webpack-example

随着项目变得越来越大，我会考虑通过@babel/typescript 插件在开发中使用 babel 进行热重载。这允许快速开发而无需等待类型正确性。

如果您有 CI，那么您可以在那里强制执行类型正确性。基本上使用打字稿来检查类型而不是转译。

另一种方法是使用 typescript 的 references 功能 (see docs here) 分别构建每个包并智能缓存结果。这允许您仅在更改后构建必要的内容。

【讨论】：