Webpack 4, как разделить код для крошечных эффективных кусков, используя SPA - PullRequest
Новая
       6

Webpack 4, как разделить код для крошечных эффективных кусков, используя SPA

0 голосов
/ 14 декабря 2018

Приложение AngularJS 1.7.2, упакованное с Webpack 4, использующее одну точку входа и один выходной комплект js для включения в распределенный html-файл.

Вот как я сейчас использую Webpack.

Это мой файл entry.js: 

// angularjs app first initialization
var app = require('./app/app');

// app scripts
require('./app/index')(app);

// screens scripts
require('./screens/index')(app);

// shared scripts
require('./shared/index')(app);

// structure scripts
require('./structure/index')(app);

Что в app это: 

var app = angular.module("myApp", ["ngRoute", "ngSanitize", "angular-loading-bar", "ngAnimate"]);

app.config(function($routeProvider, cfpLoadingBarProvider) {
  $routeProvider
  .when("/", {
    template : require('../screens/auth/login/login.html')
  });
  cfpLoadingBarProvider.includeSpinner = false;
});

app.directive("app", function($rootScope, $location, Init, AutoRedirect, ObjectManipulation, Defaults) {
  return {
    template: require('./app.html'),
    scope: {},
    link: function($scope, element, attrs) {

      Init.start().then(function() {
        $scope.initialized = true;
        $rootScope.initSrc = true;
        $rootScope.$digest();
        AutoRedirect.fire();
      });

    }
  }
});

module.exports = app;

Как вы видите, я беру экземпляр приложения AngularJSи объединить его через все приложение - у меня есть 4 основных маршрута:

  1. скрипты приложения

  2. экраны скриптов (страниц)

  3. общие сценарии (общие компоненты AngularJS, такие как выпадающий список, кнопка, автозаполнение и т. Д.)..

Каждый маршрут содержит файл index.js, который импортирует необходимые модули, компоненты и экраны соответственно.

Это пример некоторого модуля (контроллер страницы входа)который экспортируется и важен для графа зависимостей: 

// screens/auth/login/login.js    

module.exports = app => {

  require('./components/reset-password/reset-password')(app);
  require('./components/request-sms/request-sms')(app);

  app.config(($routeProvider, $locationProvider) => {
    $routeProvider
    .when("/auth/login", {
      template : require('./login.html')
    });
    // $locationProvider.html5Mode(true);
  });

  app.controller("login", ($rootScope, $scope, $location, $routeParams) => {

    $scope.$on("request-sms", (e, info) => {
      $scope.phone = info.phone;
      $scope.waitingForSms = info.waitingForSms;
      $scope.requested = info.requested;
    }, true);

  });
}

ТеперьКак вы можете видеть, приведенная выше конфигурация Webpack создает один bundle.js, который имеет целое приложение - все его модули, все его директивы (компоненты), все его службы и все его контроллеры и зависимости.

Это генерируется с большим файлом bundle.js, и пользователь загружает его при первом посещении.

Интересно, знает ли Webpack, когда пользователь посещает какое-то первое начальное представление (не html-страницу, представление, так как мыречь идет о SPA), чтобы загрузить пакет или что-то скомпилированный код, который связан только для этого конкретного представления?Конечно, - и базовая сборка SPA.

Я читал о разделении кода на некоторых видео и видел его на Youtube, но у меня нет концепции, и это можно сделать.

1 Ответ

0 голосов
/ 14 декабря 2018

Документация по использованию SplitChunksPlugin - хорошее введение в то, как вы можете использовать webpack для создания отдельных фрагментов из кода.Раздел Dynamic Imports в руководстве по разделению кода представляет собой краткое введение в разбиение на асинхронные фрагменты с использованием выражений имен import(name).Это создает ручной чанк, который загружается асинхронно.Документация по import() объясняет дальнейшее использование.

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

...