Multiple entries in Electron

[RU] 

Сразу хочу оговориться, вся эта статья имеет смысл если вы используете в своем приложение несколько экземпляров  new BrowserWindow() в своих проектах. В данном случае, если весь роутинг вашего приложения выстроен внутри одного окна, то заниматься разбиением на чанки, нужно на уровне вашего JS фреймворка (lazy-route, code-splitting).

Вопрос оптимизации в приложение на основе Electron всегда стоит остро. Очень часто можно встретить приложение, где весь бандл с HTML/CSS/JS грузится в один файл, и весь ваш роутинг выстроен таким образом, что в качестве window.loadURL() вы скармливаете url в формате file:://index.html/#/main/

 (например страницу MainPage), а в другое окно вы грузите file:://index.html/#/catalog/  то по итогу, код из file:://index.html/#/main/ у вас попадет и в catalog, хотя код из MainPage никогда не будет вызван в Electron.BrowserWindow окне.

Тут важно понимать, что роутинг каждого вашего приложения может быть очень гибок, это значит что из каждого окна, вы можете перейти на любую страницу (объясню на примере vue-router

Что у нас есть на входе из стека:

  • vue
  • electron
  • webpack
  • vue-router

Структура проекта

my-project/
    webpack.config.js
    src/
        main-process/
           entry-main.js
        renderer-process/
            router/
                index.js
            store/
                index.js
            entry-renderer.js
        
    node_modules/
    package.json
    ...прочие конфигурационные файлы

Пример типовой структуры роутера, выглядит так:

{
        path: '/settings/',
        name: 'SettingsPage',
        component: require('@/Layouts/SettingsLayout/SettingsLayout.vue').default,
        redirect: '/settings/keymap',
        children: [
          {
            path: 'keymap',
            name: 'SettingsKeymapPage',
            component: require('@/pages/Settings/SettingsKeymapPage/SettingsKeymapPage.vue').default,
          },
          {
            path: 'editor',
            name: 'SettingsEditorPage',
            component: require('@/pages/Settings/SettingsEditorPage/SettingsEditorPage.vue').default,
          },
          {
            path: 'build',
            name: 'SettingsBuildPage',
            component: require('@/pages/Settings/SettingsBuildPage/SettingsBuildPage.vue').default,
          },
        ],
      },

Здесь мы подключаем 4 компонента в один entry-point (main.js) и подключаем наш HTML. Получается в рамках нашего одного html файла работает несколько страниц.

В терминах WEB"а - это несколько страниц (конкретно здесь 3, + шаблон). Этот HTML файл мы загружаем в наш const window = new BrowserWindow(). window.loadURL(settings.html)

Но что получается, если роут с именем keymap нам нужно загрузить в отдельное окно Electron? Условно говоря, страницу с `editor` мы открываем в одном окне, а keymap в другом?

Первое что приходит в голову, это загружать тот же .html файл с нужным роутом через решетку. То есть, вот так:

window.loadURL('settings.html/#/keymap') 

window.loadURL('settings.html/#/editor')

Здесь все отработает у нас то, как мы и хотим. Но что если со страницы editor, мы в том же самом окне никак не можем попасть через HTML5 роутинг? А страница build вообще не вызывается? Получается что в наш bundle попадет код, который вообще никогда не будет вызываться. Нас это положение дел не устраивает, ибо это приводит к утяжелению Electron окна, и оперативная память захламляется JS кодом, который висит в ней просто так.

Допустим еще такие вещи, что почти во всем вашем приложение используется какая нибудь глобальная и важная зависимость например `moment.js`. Она встречается практически в каждом вашем компоненте, но на странице `about.html` она никак себя не проявляет. Эту проблему также нужно как-то решать.

Играя гибко зависимостями своего проекта, вы существенно экономите ресурсы пользователя, и загружаете в бандл только то, что вам нужно. 

Нужно также отметить, что все эти "проблемы" возникают в следствие использование разных JS библиотек, и отказ от использования HTML файлов. В идеальной ситуации, весь ваш UI должен храниться и писать сразу в HTML файлов, минуя сборщики. Но если вы привыкли использовать в своих проектах использовать библиотеки, то нам нужно более гибко настроить наш сборщик.

...Article in a process of writing.

  • Slider

You may also like

  • Slider
  • Slider
2 comments

John Doe

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non | numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Reply