Скорость разработки / оптимизация TypeScript Lerna / MonoRepo Webpack

При использовании lerna для проекта TypeScript с веб-пакетом я пытаюсь оптимизировать скорость веб-пакета, когда в библиотеке происходит изменение разработки. Прямо сейчас, когда код в библиотеке изменяется, на перекомпиляцию уходит более 1 млн.

Структура каталогов:

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 в корневом каталоге, он запускает webpack параллельно как на main-project, так и на library. При настройке по умолчанию происходит следующее:

  • library webpack компилируется примерно за 7-8 секунд
  • main-project webpack перекомпилирует packages/main-project/node_modules/library/dist/index.js файл в библиотеку. [Hash] .js примерно за 1 мес. Или около того
  • HMR перезагружает веб-страницу

Я пытаюсь добиться:

  1. Просто включите library/dist/index.js (через node_modules/library или ../library пути)
  2. HMR перезагружается при изменении этого пути

Мне нужна помощь:

  • Как указать main-project/webpack.config.js игнорировать node_modules/library и не перекомпилировать при изменении библиотеки
  • Попросите основной проект импортировать library/dist/index.js, который был построен
  • Убедитесь, что HMR обнаруживает изменения библиотеки

Конфигурация ниже почти работает. Не хватает только перезагрузки HRM, если library/dist/index.js изменится:

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'),
        },
    };
};

person Mike Crowe    schedule 27.04.2019    source источник
comment
Удалось ли вам придумать, как Webpack обнаруживает изменения библиотеки?   -  person willium    schedule 22.12.2020


Ответы (1)


Вы можете взглянуть на это репо для вдохновения https://github.com/dan-kez/lerna-webpack-example

По мере того, как проект становится большим, я бы подумал об использовании babel для горячей перезагрузки в dev через плагин @babel/typescript. Это позволяет быстро развиваться, не дожидаясь правильности типа.

Если у вас есть CI, вы можете обеспечить здесь правильность типа. В основном используйте машинописный текст для проверки типов, но не транспиляции.

Альтернативой является использование функции машинописного текста references (см. Документацию здесь), чтобы Соберите каждый пакет отдельно и интеллектуально кэшируйте результат. Это позволяет создавать только то, что необходимо после изменений.

person dankez    schedule 16.01.2020