Webpack: понимание фрагментов кода и разбиение кода

Question

Я недавно использовал React и начал пытаться включить Webpack в свой рабочий процесс. Тем не менее, я пытаюсь понять больше об этом инструменте (к сожалению, документация не очень хорошо объясняет, что означают разные аспекты).

На высоком уровне я понимаю, что Webpack позволяет создать связанный файл JavaScript, чтобы вы могли писать код в нескольких файлах, но в вашем теге скрипта в одном HTML-файле был загружен 1 файл. Что такое куски в webpack и как оно относится к этому процессу связывания?

Также, webpack был рекламирован как способный кодовое разделение - что именно это означает, и можете ли вы, ребята, привести пример?

Answer 1

«Цанки» - это части вашего кода, которые в определенном смысле требуются по требованию с сервера. Таким образом, у вас может быть одна основная версия, которая загружает сайт, но загружает дополнительные ресурсы, когда пользователь начинает просматривать.

Практически вы делаете это, определяя точку разделения. Это говорит webpack поставить код, необходимый для запуска кода в этой точке разделения (т. Е. Функции) в собственном файле. Затем Webpack будет разлагать модули, которые являются общими для этого разделенного фрагмента и основного файла, и помещать его в основной файл, чтобы избежать дублирования кода поставщика (другими словами, кусок, вероятно, не будет стоять в одиночестве). Теперь Webpack создает два файла: основной файл и дополнительный фрагмент. Когда попадает код кода куска, основной файл будет тянуть дополнительный кусок от провода. С точки зрения разработчика, все это происходит с require, что позволяет легко рассуждать.

Одним из наиболее распространенных способов использования является код маршрутизатора chunk. В документах react-router есть working example, но общая идея заключается в том, что вы загружаете начальные маршруты в основной файл, а все последующие или дочерние маршруты могут быть в своих собственных кусках и загружаться только тогда, когда пользователь нажимает на эти маршруты, увеличивая производительность (потенциально). Пример кода - отличный способ понять, как это работает, потому что вы можете наблюдать, как файлы вытягиваются из провода, когда вы нажимаете маршруты.

Во всяком случае, кодирование кода является удивительной особенностью.

---

Все, что сказано, будьте очень осторожны в отношении преждевременной оптимизации. Это может привести к снижению производительности. Лучшим советом является работа с Webpack без каких-либо фрагментов кода, а затем добавление кода, когда вам требуется производительность (например, когда вы отмечаете, что функция или раздел вашего сайта тяжелая, но редко используется).

PS: Если у вас есть более конкретные вопросы, я рад изменить этот ответ. Если вам интересно, ознакомьтесь с приведенной выше ссылкой react-router.

Answer 2

React Router и Webpack играют фантастически хорошо вместе, так как вы можете автоматически разделить код + загружать куски динамически при запросе маршрута. Еще лучше, если вы настроили свой проект на использование Webpack 2 (+ Shake shake), вы можете использовать собственный импорт ES6 и System.import.

Вот как:

import App from 'containers/App'; 
 
function errorLoading(err) { 
 
    console.error('Dynamic page loading failed', err); 
 
} 
 
function loadRoute(cb) { 
 
    return (module) => cb(null, module.default); 
 
} 
 
export default { 
 
    component: App, 
 
    childRoutes: [ 
 
    { 
 
     path: '/', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Home') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    }, 
 
    { 
 
     path: 'blog', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Blog') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    } 
 
    ] 
 
};

Вы можете получить весь гид в этом блоге: Automatic Code Splitting for React Router