Question

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条主要路线：

应用程序脚本
显示脚本（页面）
共享脚本（共享的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，其中包含整个应用程序-所有模块，所有指令（组件），所有服务以及所有控制器和依赖项。 / p>

这会生成一个大的bundle.js文件，用户在初次访问时就会下载它。

我想知道Webpack是否知道用户何时访问某个第一个初始视图（不是html页面，一个视图，因为我们正在谈论SPA）来加载捆绑包或某些仅与此特定相关的已编译代码视图？当然-SPA的基本构建。

我已经在YouTube上阅读了有关代码拆分的信息，并在YouTube上看了一些视频，但我不了解这个概念，可以做到这一点。

Answer 1

有关使用SplitChunksPlugin的文档很好地介绍了如何使用webpack从代码创建单独的块。代码拆分指南中的Dynamic Imports部分提供了使用import(name)名称表达式拆分为异步块的快速介绍。这将创建一个手动加载的异步块。 import()上的文档说明了进一步的用法。

这些将帮助您指示webpack创建块，这些块将是输出中的独立文件。 webpack examples包含许多示例配置及其输出，因此您可以选择适合自己需求的内容。

Webpack 4如何使用SPA将代码拆分为微小的高效块

1 个答案: