Question

我需要帮助以正确的方式捆绑我的项目。我的项目的加载页面有点慢，需要一个解决方案，所以如果你知道一些可以帮助我的东西，我会很感激。

我的文件＆gt;

systemjs.config.js

(function(global) {   // map tells the System loader where to look for things   var map = {
    '@angular':   'node_modules/@angular',
    'moment':     'node_modules/moment',
    'rxjs':       'node_modules/rxjs',
    'devextreme': 'node_modules/devextreme',

    'cldr': 'node_modules/cldrjs/dist/cldr',
    'cldr-data': 'node_modules/cldr-data',
    'json': 'node_modules/systemjs-plugin-json/json.js',
    'jszip': 'node_modules/jszip/dist/jszip.min.js',
    'globalize': 'node_modules/globalize/dist/globalize',   };

  // packages tells the System loader how to load when no filename and/or no extension   var packages = {
    'moment':     { main: 'min/moment.min.js',    defaultExtension: 'js' },
    'cldr':       { main: '../cldr.js',           defaultExtension: 'js' },
    'globalize':  { main: '../globalize.js',      defaultExtension: 'js' }   };

  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'testing',
    'upgrade'   ];

  // Individual files (~300 requests):   function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js', minify: true };   }

  // Bundled (~40 requests):   function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js', minify: true };   }

  // Most environments should use UMD; some (Karma) need the individual index files   var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

  // Add package entries for angular packages   ngPackageNames.forEach(setPackageConfig);

  var config = {
    defaultJSExtensions: true,
    map: map,
    packages: packages,
    bundles: {
      "node_modules/rxjs/bundles/Rx.min.js": [
        "rxjs/*",
        "rxjs/operator/*",
        "rxjs/observable/*",
        "rxjs/add/operator/*",
        "rxjs/add/observable/*",
        "rxjs/util/*"
      ]
    }   }

  // filterSystemConfig - index.html's chance to modify config before we register it.   if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

gulpfile.ts

import * as gulp from 'gulp'; import * as util from 'gulp-util'; import * as runSequence from 'run-sequence'; var Builder = require("systemjs-builder"); import {loadTasks} from './tools/utils'; import {TASKS_DIR} from './tools/config';

loadTasks(TASKS_DIR);

// -------------- // Build dev full (with legacy). gulp.task('build.dev.full', (done: any) => {   runSequence(
    'clean',
    'build.assets',
    'build.fonts',
    'build.templates',
    'build.css',
    'build.js',
    'build.config',
    'copy.dependencies',
    'copy.systemjs.config',
    'build.index',
    done   ); });

gulp.task("rxjs", () => {   var builder = new Builder('./');   builder.config({
    paths: {"rxjs/*": "node_modules/rxjs/**/*.js"},
    map: {"rxjs": "node_modules/rxjs"},
    packages: { "rxjs": {main: 'Rx.js', defaultExtension: "js"} }   });   builder.bundle('rxjs', 'public/lib/rxjs/Rx.min.js', {
    sourceMaps: true,
    minify: true,
    mangle: true   }); });

// -------------- // Build prod. gulp.task('build.prod', (done: any)
=> {   runSequence(
    'clean',
    'build.assets',
    'build.templates',
    'build.css',
    'build.fonts',
    'copy.ts',
    'build.js',
    'build.config',
    'copy.dependencies',
    'copy.systemjs.config',
    'build.index',
    done) });

// -------------- // Serve prod. gulp.task('server', (done: any) => {  runSequence(
    'server.start',
    done   ) });

关于任务，如果您需要查看，只需询问

谢谢！

Answer 1

如果您没有延迟加载，请查看以下链接。

https://angular.io/guide/lazy-loading-ngmodules

使用延迟加载，您只需初始加载显示起始页面所需的数据。之后，您可以定义一个预加载策略，在其后立即加载其余模块。

SystemJS Bundle性能建议

1 个答案: