Webpack и Lazy Load для крупномасштабного веб-приложения

Фон

Я пытаюсь разработать с помощью Webpack и JavaScript. Webpack объединит весь исходный код в один файл. Когда приложение становится большим, файл будет очень большим и окажет негативное влияние на производительность.

Webpack

Webpack предоставил функцию с разбивкой кода, которая разделила бы выход пакета на разные в соответствии с предопределенной точкой входа. Это поможет повысить производительность, если приложение станет слишком большим. Тем не менее, он потребовал реструктурировать приложение и глубоко понять приложение, а затем приложение вписалось в разные модули, которые были бы точками входа для сборки. Кроме того, это потребует изменения кода, когда другому требуется вызвать функцию Lazy Loading.

SystemJs

SystemJs - динамический загрузчик модулей, который ленив загружает требуемый модуль в Runtime.

Вопрос

Должен ли я использовать webpack для приложения большой продажи?

Возможное решение

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

Обновление

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

import('./test.js').then(function(Test){
  var test = new Test.default();
  test.doSomething()
})

Что похоже на

import Test from './test';
var test = new Test();
test.doSomething();

Поддержка Webpack

Требуется настроить общий путь, chunkFilename и добавить синтаксис-динамический импорт для включения нового синтаксиса (import ()).

const path = require('path');

module.exports = {
    entry: {
        app:    './src/app.js'
    },
    output: {
        publicPath: 'bin/',
        path: path.resolve(__dirname, 'bin'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015'],
                            plugins: ["syntax-dynamic-import"]
                        }
                    }
                ]               
            }
        ]
    }
}; 
3 голоса | спросил Ben Cheng 2 SatEurope/Moscow2017-12-02T15:44:56+03:00Europe/Moscow12bEurope/MoscowSat, 02 Dec 2017 15:44:56 +0300 2017, 15:44:56

1 ответ


3

Все зрелые инструменты загрузки и комплектации JavaScript, начиная с Webpack до RequireJS до SystemJS, предоставляют методы для этого.

В Webpack включена функция, известная как разделение кода .

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

Я забыл терминологию для RequireJS, но функциональность там существует и предоставляется r.js.

Итак, просто исследование.

Но, чтобы ответить на ваш прямой вопрос, все эти инструменты, включая Webpack, подходят для разработки больших приложений. На самом деле они преуспевают в этом. Мои личные предпочтения не для Webpack, а скорее для JSPM.

Как отмечает Бен Ченг, подход разбиения кода Webpack требует структурирования вашего приложения с точки зрения разных точек входа, которые вы можете морально воспринимать как подпакеты или вспомогательные приложения. Тем не менее, этот метод структурирования играет определенную роль в разделении пакетов во всех этих инструментах.

Прерывание вашего приложения в этих более независимых единицах может быть трудной задачей.

Отказ от ответственности: Я являюсь членом команды JSPM

ответил Aluan Haddad 2 SatEurope/Moscow2017-12-02T16:34:00+03:00Europe/Moscow12bEurope/MoscowSat, 02 Dec 2017 16:34:00 +0300 2017, 16:34:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132