TypeScript Lerna / MonoRepo Webpack скорость разработки / оптимизации - PullRequest
Новая
       24

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

0 голосов
/ 27 апреля 2019

При использовании lerna для проекта TypeScript с веб-пакетом я пытаюсь оптимизировать скорость веб-пакета, когда в библиотеке происходит изменение разработки.Прямо сейчас требуется 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.При настройке по умолчанию вот что происходит:

  • library веб-пакет компилируется за 7-8 с
  • main-project веб-пакет перекомпилирует файл packages/main-project/node_modules/library/dist/index.js в библиотеку. [Hash].js около 1m + или около того
  • 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'),
        },
    };
};
...