Реагируйте, создавая оптимальные производственные пакеты с помощью webpack

Сегодня я погрузился во внутреннее устройство Webpack, и мне удалось использовать множество его полезных функций (через загрузчики Webpack), такие как модули CSS и транспилятор Babel. Я хочу использовать это для создания приложения React (без create-react-app).

Вот мой файл конфигурации:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {

    entry: {
        main: './src/index.js',
    },


    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    module: {

        rules: [
            {
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        query: {
                            modules: true,
                            localIdentName: '[name]__[local]___[hash:base64:5]'
                        }
                    }
                ]

            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ]
};

Поскольку теперь у меня есть одна точка входа, весь пакет конвертируется в один файл JS. Однако по мере роста моего приложения для реагирования, вероятно, будет лучше разделить пакет на несколько частей, чтобы их можно было загружать быстрее (это правильная терминология, верно?).

Вопрос:

  1. Какие аспекты мне нужно учитывать при разделении приложения на несколько блоков?
  2. Как можно разбить приложение на несколько частей? Могу ли я просто ввести несколько точек входа (если это так, что тогда такое тактические точки входа?)?

Привет, @WillemvanderVeen! вы уверены, что вам нужно разделить пакет на несколько частей? Потому что в большинстве случаев в этом нет необходимости. Я думаю, что первый вопрос, на который вам нужно ответить, - это Do I really need to split my bundle?. Если вам действительно нужно разделить пакет, вы можете создать пакет для каждого корня :)

Bastien 24.07.2018 17:09

Я не уверен, что вам нужно разбивать пакет на несколько частей. Но я видел это в других местах. Например, приложение Angular - это один файл HTML с несколькими пакетами.

Willem van der Veen 24.07.2018 18:08

Да, иметь несколько пакетов - обычное дело. Но почему вы хотите это сделать? Ваше приложение загружается очень медленно? Если вам действительно нужно или вы хотите, ИМО, лучший способ сделать это - иметь пакет для каждого корня.

Bastien 25.07.2018 08:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
4
3
112
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам не нужно иметь несколько точек входа.

Вы можете блокировать на основе

  • маршруты
  • максимальный размер фрагмента
  • с отдельным чанком для внешние зависимости
  • использование динамический импорт для модулей везде, где это имеет смысл

Если вы не уверены, какие параметры использовать, используйте значения по умолчанию с плагином splitchunk webpack (https://webpack.js.org/plugins/split-chunks-plugin/).

Затем вы можете опробовать свои собственные настройки, чтобы выяснить, что лучше всего подходит для вашего приложения.

Другие вопросы по теме