Πώς να διαμορφώσετε το Webpack 4 με το Angular 7: ένας πλήρης οδηγός

Το Angular CLI διευκολύνει τη δημιουργία μιας εφαρμογής που λειτουργεί ήδη, αμέσως. Είναι ένα εξαιρετικό εργαλείο, αλλά δεν έχετε σκεφτεί ποτέ: "Πώς λειτουργεί; Πώς μπορώ να δημιουργήσω μια εφαρμογή χωρίς το CLI;'

Αυτές οι ερωτήσεις ήρθαν στο μυαλό μου όταν κυκλοφόρησε το Angular 7. Άρχισα να ψάχνω για απαντήσεις στο διαδίκτυο και αυτό που βρήκα δεν ήταν ενημερωμένο για τον σκοπό μου. Πράγματι, όπως το Angular και το webpack εξελίσσονται πάντα, έτσι και οι εξαρτήσεις και οι διαμορφώσεις.

Σε αυτό το άρθρο πρόκειται να μάθετε:

• Πώς να ρυθμίσετε μια βασική εφαρμογή Angular 7, από την αρχή
• Τρόπος διαμόρφωσης του πακέτου ιστού για λειτουργία ανάπτυξης (σύνταξη Just-in-Time)
• Τρόπος διαμόρφωσης του πακέτου ιστού για λειτουργία παραγωγής (Συλλογή εκ των προτέρων)

Angular 7: ρυθμίστε μια βασική εφαρμογή

Δημιουργήστε ένα νέο αρχείο package.json και προσθέστε τις ακόλουθες γραμμές για να εγκαταστήσετε το Angular και τις εξαρτήσεις του.

"dependencies": 
  "@angular/animations": "~7.0",
  "@angular/common": "~7.0",
  "@angular/compiler": "~7.0",
  "@angular/compiler-cli": "~7.0",
  "@angular/core": "~7.0",
  "@angular/forms": "~7.0",
  "@angular/http": "~7.0",
  "@angular/platform-browser": "~7.0",
  "@angular/platform-browser-dynamic": "~7.0",
  "@angular/platform-server": "~7.0",
  "@angular/router": "~7.0",
  "@angular/upgrade": "~7.0",
  "core-js": "~2.5",
  "rxjs": "~6.3",
  "zone.js": "~0.8"
}

Έχω αγωνιστεί για πολύ καιρό για να βρω την καλύτερη δομή φακέλου που ταιριάζει σε κάθε έργο Angular, ειδικά όταν η εφαρμογή μεγαλώνει σε μέγεθος. Αυτό το άρθρο με δίδαξε πολλά για το θέμα.

Δημιουργήστε έναν νέο φάκελο src και τους παρακάτω φακέλους/αρχεία μέσα σε αυτόν. Όλη η επιχειρηματική λογική της εφαρμογής Angular θα βρίσκεται σε αυτόν τον φάκελο.

src
|__ app
    |__ modules
        |__ menu
            |__ components
                |__ menu
                    |__ menu.component.html
                    |__ menu.component.scss
                    |__ menu.component.ts
            |__ menu.module.ts
            |__ menu-routing.module.ts
|__ shared
         |__ components
             |__ home
                 |__ home.component.html
                 |__ home.component.scss
                 |__ home.component.ts
|__ app.component.html
        |__ app.component.scss        
        |__ app.component.ts
        |__ app.module.ts
        |__ app-routing.module.ts
|__ index.html
|__ main.ts

Κάθε εφαρμογή έχει τουλάχιστον μία λειτουργική μονάδα Angular, τη λειτουργική μονάδα root την οποία εκκινείτε για να εκκινήσετε την εφαρμογή. Κατά σύμβαση, συνήθως ονομάζεται AppModule. Δημιουργώ μια άλλη ενότητα, την MenuModule για να σας δείξω πώς μπορείτε να χρησιμοποιήσετε το lazy loading στο έργο σας, ειδικά για παραγωγή.

Μερικά σημαντικά σημεία:

• index.html

Η προσθήκη <base href=”/”> λέει στον γωνιακό δρομολογητή μας πώς να συνθέτει διευθύνσεις URL πλοήγησης. Αυτή η γραμμή σημαίνει ότι η εφαρμογή σας θα ξεκινά από τον ριζικό φάκελο, δηλαδή τοπικά θα θεωρούσε localhost:3000/ και στον διακομιστή θα θεωρούσε τον ριζικό φάκελο.

• app-routing.module.ts

Υπάρχουν τρία βασικά βήματα για τη ρύθμιση μιας λειτουργικής μονάδας με αργή φόρτωση:

1. Δημιουργήστε τη λειτουργική μονάδα
2. Δημιουργήστε τη λειτουργική μονάδα δρομολόγησης της λειτουργικής μονάδας
3. Διαμορφώστε τις διαδρομές

Το {path: ‘menu’, loadChildren:’./modules/menu/menu.module#MenuModule’} λέει στην Angular να φορτώσει αργά τη λειτουργική μονάδα μας MenuModule μέχρι να επισκεφτεί ο χρήστης τη διαδρομή /menu.

Διαμόρφωση TypeScript

Προσθέστε τις ακόλουθες γραμμές στο αρχείο package.json σας:

"devDependencies": {
  "@types/core-js": "~2.5",
  "@types/node": "~10.12",
  "typescript": "~3.1"
}

Δημιουργήστε στον ριζικό φάκελο του έργου σας ένα αρχείο tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "lib": ["es6", "dom"],
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

Αυτό είναι ένα βασικό αρχείο διαμόρφωσης TypeScript. Είναι απαραίτητο να εγκαταστήσετε τον ορισμό τύπων node και core-js. Χωρίς αυτό, το TypeScript δεν θα μπορεί να μεταγλωττίσει την εφαρμογή Angular σε JavaScript.

Διαμόρφωση πακέτου ιστού για λειτουργία ανάπτυξης (σύνταξη Just-in-Time)

Πρώτα απ 'όλα, τι σημαίνει σύνταξη; Δεν σημαίνει μεταγλώττιση αρχείων TypeScript σε JavaScript, αυτό δεν σχετίζεται με το Angular. Η ίδια η Angular πρέπει να μεταγλωττίσει τα πρότυπα HTML σε JavaScript και αυτό μπορεί να συμβεί σε 2 διαφορετικά χρονικά σημεία:

• Μετά τη λήψη της εφαρμογής σας στο πρόγραμμα περιήγησης (JiT)

• Αμέσως μετά την ανάπτυξη, κατά το χρόνο κατασκευής, πριν γίνει λήψη της εφαρμογής σας στο πρόγραμμα περιήγησης (AoT)

Τι είναι το webpack;

Σύμφωνα με τη Wikipedia:

Το Webpack είναι ένα πακέτο λειτουργιών JavaScript ανοιχτού κώδικα. Ο κύριος σκοπός του είναι να ομαδοποιεί αρχεία JavaScript για χρήση σε ένα πρόγραμμα περιήγησης, ωστόσο είναι επίσης ικανό να μετασχηματίζει, να ομαδοποιεί ή να συσκευάζει σχεδόν οποιονδήποτε πόρο ή περιουσιακό στοιχείο. Το Webpack παίρνει ενότητες με εξαρτήσεις και δημιουργεί στατικά στοιχεία που αντιπροσωπεύουν αυτές τις ενότητες. Είναι ένα bundler λειτουργιών κυρίως για JavaScript, αλλά μπορεί να μεταμορφώσει στοιχεία διεπαφής όπως HTML, CSS, ακόμη και εικόνες, εάν περιλαμβάνονται οι αντίστοιχες προσθήκες.

Για να πούμε στο webpack πώς να ομαδοποιήσει την εφαρμογή μας, πρέπει να διαμορφώσουμε αυτό που ονομάζουμεΒασικές Έννοιες:

Είσοδος —Ένα σημείο εισόδου υποδεικνύει ποια ενότητα webpack θα πρέπει να χρησιμοποιήσει για να ξεκινήσει η δημιουργία του εσωτερικού γραφήματος εξάρτησης. Το Webpack θα καταλάβει από ποιες άλλες μονάδες και βιβλιοθήκες εξαρτάται αυτό το σημείο εισόδου (άμεσα και έμμεσα).

Έξοδος —Η ιδιότητα εξόδου λέει στο webpack πού να εκπέμπει τα πακέτα που δημιουργεί και πώς να ονομάσετε αυτά τα αρχεία. Από προεπιλογή ορίζεται σε ./dist/main.js για το κύριο αρχείο εξόδου και στο φάκελο ./dist για οποιοδήποτε άλλο αρχείο που δημιουργείται.

Φορτωτές —Σε υψηλό επίπεδο, οι φορτωτές έχουν δύο ιδιότητες στη διαμόρφωση του πακέτου ιστού:

• Η ιδιότητα δοκιμής προσδιορίζει ποιο αρχείο ή αρχεία πρέπει να μετασχηματιστούν.
• Η ιδιότητα use υποδεικνύει ποιος φορτωτής πρέπει να χρησιμοποιηθεί για να γίνει ο μετασχηματισμός.

Προσθήκες —Ενώ τα προγράμματα φόρτωσης χρησιμοποιούνται για τη μετατροπή ορισμένων τύπων λειτουργικών μονάδων, οι προσθήκες μπορούν να αξιοποιηθούν για την εκτέλεση ενός ευρύτερου φάσματος εργασιών, όπως η βελτιστοποίηση δέσμης, η διαχείριση περιουσιακών στοιχείων και η εισαγωγή μεταβλητών περιβάλλοντος.

Όλα αυτά πρέπει να ρυθμιστούν στο αρχείο διαμόρφωσης webpack webpack.config.js.

Διαμόρφωση πακέτου ιστού

Στο φάκελο src πρέπει να δημιουργήσουμε άλλα 2 αρχεία:

• vendor.ts που εισάγει μόνο τις λειτουργικές μονάδες τρίτων της εφαρμογής.
• polyfills.ts χρειαζόμαστε polyfills για να εκτελέσουμε μια Angular εφαρμογή στα περισσότερα προγράμματα περιήγησης, όπως εξηγείται στον οδηγό Υποστήριξη προγράμματος περιήγησης. Αυτό το αρχείο δέσμης θα φορτωθεί πρώτα, επομένως αυτό είναι ένα καλό μέρος για να διαμορφώσετε το περιβάλλον του προγράμματος περιήγησης για παραγωγή ή ανάπτυξη.

Δημιουργήστε έναν νέο φάκελο config και τα ακόλουθα αρχεία μέσα:

• webpack.config.common.js : διαμόρφωση που θα χρησιμοποιήσουμε για ανάπτυξη και παραγωγή.

Είσοδος —Για αυτήν την εφαρμογή (και για τις περισσότερες από αυτές στην πραγματικότητα) έχουμε 3 διαφορετικά σημεία εισόδου: vendor.ts polyfills.ts και main.ts.

entry: {
    vendor: './src/vendor.ts',
    polyfills: './src/polyfills.ts',
    main: './src/main.ts'
}

Φορτωτές —Φορτώνουμε .html αρχεία με html-loader που είναι αρκετά τυπικό. Η φόρτωση αρχείων .scss είναι λίγο δύσκολη για μια εφαρμογή Angular και αγωνίστηκα για πολλές ώρες για να καταλάβω πώς να το κάνω.

Πρώτα απ 'όλα, πρέπει να φορτώσουμε αρχεία sass χρησιμοποιώντας δύο φορτωτές sass-loader και css-loader. Εάν θέλετε να διευκολύνετε τον εντοπισμό σφαλμάτων, ειδικά στη λειτουργία ανάπτυξης, είναι πολύ σημαντικό να προσθέσετε sourceMap: trueως επιλογές. Σε μια Angular εφαρμογή προσθέτουμε στυλ στο στοιχείο περνώντας μια διαδρομή αρχείου στον πίνακα styleUrls ως εξής styleUrls: ["./path/styles.scss"], αλλά πρέπει να έχουμε το στυλ ως συμβολοσειρά και το to-string-loader θα το κάνει για εμάς και θα μεταφέρει την έξοδο σε μια συμβολοσειρά.

{
    test: /\.html$/,
    loader: 'html-loader'
},
{
    test: /\.(scss|sass)$/,
    use: [
        'to-string-loader',
        { 
            loader: 'css-loader', 
            options: { 
                sourceMap: true 
            } 
        },
        { 
            loader: 'sass-loader', 
            options: { 
                sourceMap: true 
            } 
        }
    ],
    include: helpers.root('src', 'app')
}

Οι Προσθήκες —CleanWebpackPlugin θα αφαιρέσουν/καθαρίσουν τους φακέλους έκδοσης πριν από τη δημιουργία εκ νέου. Η προσθήκη HtmlWebpackPlugin θα δημιουργήσει ένα αρχείο HTML5 για εσάς που περιλαμβάνει όλα τα πακέτα webpack σας στο σώμα χρησιμοποιώντας ετικέτες σεναρίου. Απαιτεί μόνο διαδρομή προς το πρότυπο.

new CleanWebpackPlugin(
    helpers.root('dist'),
    {
        root: helpers.root(),
        verbose: true
    }
),
new HtmlWebpackPlugin({
    template: 'src/index.html'
})

• Το webpack.config.dev.js είναι η διαμόρφωση του πακέτου ιστού που θα χρησιμοποιήσουμε μόνο για τη λειτουργία ανάπτυξης.

mode: "development"

Στο webpack 4, η επιλεγμένη λειτουργία λέει στο webpack να χρησιμοποιεί τις ενσωματωμένες βελτιστοποιήσεις του ανάλογα.

devtool: 'cheap-module-eval-source-map'

Αυτή η επιλογή ελέγχει εάν και πώς δημιουργούνται οι χάρτες πηγής. Χρησιμοποιώντας cheap-module-eval-source-map Οι χάρτες προέλευσης από προγράμματα φόρτωσης υποβάλλονται σε επεξεργασία για καλύτερα αποτελέσματα. Ωστόσο, οι χάρτες προέλευσης φορτωτή απλοποιούνται σε μία αντιστοίχιση ανά γραμμή.

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].chunk.js'
}

Το κλειδί output περιέχει ένα σύνολο επιλογών που καθοδηγούν το webpack για το πώς και πού πρέπει να εξάγει τα πακέτα, τα στοιχεία και οτιδήποτε άλλο δεσμεύετε ή φορτώνετε με το webpack. Εδώ λέμε στο webpack να εξάγει τα πακέτα μας στο φάκελο dist.

optimization: {
    noEmitOnErrors: true
}

Παρακάμπτει τη φάση εκπομπής κάθε φορά που υπάρχουν σφάλματα κατά τη μεταγλώττιση. Αυτό διασφαλίζει ότι δεν εκπέμπονται περιουσιακά στοιχεία με σφάλματα. Το κλειδί optimization έχει πολλές άλλες επιλογές που ορίζονται από προεπιλογή ανάλογα με τη λειτουργία διαμόρφωσης του πακέτου ιστού (ανάπτυξη/παραγωγή). Μπορείτε να διαβάσετε περισσότερα σχετικά εδώ.

{
    test: /\.ts$/,
    loaders: [
        'babel-loader',
        {
            loader: 'awesome-typescript-loader',
            options: {
                configFileName: helpers.root('tsconfig.json')
            }
        },
        'angular2-template-loader',
        'angular-router-loader'
    ],
    exclude: [/node_modules/]
}

Το angular-router-loader είναι ένα πρόγραμμα φόρτωσης συσκευασιών ιστού που επιτρέπει τη φόρτωση μονάδων βασισμένη σε συμβολοσειρές με τον γωνιακό δρομολογητή.

Το angular2-template-loader είναι ένα πρόγραμμα φόρτωσης αλυσίδας που ενσωματώνει όλα τα html και τα στυλ σε στοιχεία Angular.

Το awesome-typescript-loader είναι επί του παρόντος το ταχύτερο πρόγραμμα φόρτωσης του πακέτου ιστού TypeScript. Χρησιμοποιεί ανάλυση εξάρτησης για τη δημιουργία γραφήματος εξάρτησης μονάδων. Αυτό επιταχύνει σχετικά τη διαδικασία κατασκευής.

Το babel-loader επιτρέπει τη μεταγραφή αρχείων JavaScript.

devServer: {
    historyApiFallback: true,
    stats: 'minimal'
}

Όταν χρησιμοποιείτε το HTML5 History API, η σελίδα index.html θα πρέπει πιθανότατα να προβληθεί αντί για τυχόν απαντήσεις 404. Για αυτό πρέπει να ενεργοποιήσουμε το historyApiFallback.

Η επιλογή stats σάς επιτρέπει να ελέγχετε με ακρίβεια ποιες πληροφορίες δέσμης εμφανίζονται. Αυτό μπορεί να είναι μια καλή μέση λύση, αν θέλετε κάποιες πληροφορίες δέσμης, αλλά όχι όλες.

Προσθήκη σεναρίων

Προσθέστε τις ακόλουθες γραμμές στο αρχείο package.json σας:

"scripts": {
  "build:dev": "webpack-dev-server --inline --hot --progress --port 8080"
}

Το --hot ενεργοποιεί την Αντικατάσταση Hot Module (HMR) πακέτου web. Ανταλλάσσει, προσθέτει ή αφαιρεί modules ενώ εκτελείται μια εφαρμογή, χωρίς πλήρη επαναφόρτωση. Αυτό μπορεί να επιταχύνει σημαντικά την ανάπτυξη με διάφορους τρόπους:

• Διατηρήστε την κατάσταση εφαρμογής που χάνεται κατά τη διάρκεια μιας πλήρους επαναφόρτωσης.
• Εξοικονομήστε πολύτιμο χρόνο ανάπτυξης ενημερώνοντας μόνο ό,τι έχει αλλάξει.
• Οι τροποποιήσεις που γίνονται στο CSS/JS στον πηγαίο κώδικα έχουν ως αποτέλεσμα μια άμεση ενημέρωση του προγράμματος περιήγησης που είναι σχεδόν συγκρίσιμη με την αλλαγή στυλ απευθείας στα εργαλεία προγραμματισμού του προγράμματος περιήγησης.

Τώρα είστε έτοιμοι! Μπορείτε να εκτελέσετε npm run build:dev open το πρόγραμμα περιήγησής σας και να πλοηγηθείτε στο localhost:8080.

Διαμόρφωση πακέτου ιστού για λειτουργία παραγωγής (Συλλογή εκ των προτέρων)

Πλεονεκτήματα της συλλογής AoT

• Με το AoT, το πρόγραμμα περιήγησης κατεβάζει μια προ-μεταγλωττισμένη έκδοση της εφαρμογής. Το πρόγραμμα περιήγησης φορτώνει τον εκτελέσιμο κώδικα, ώστε να μπορεί να αποδώσει την εφαρμογή αμέσως, χωρίς να περιμένει να μεταγλωττίσει πρώτα την εφαρμογή.
• Ο μεταγλωττιστής ενσωματώνει εξωτερικά πρότυπα HTML και φύλλα στυλ CSS στην εφαρμογή JavaScript, εξαλείφοντας ξεχωριστά αιτήματα AJAX για αυτά τα αρχεία προέλευσης.
• Δεν χρειάζεται να κάνετε λήψη του μεταγλωττιστή Angular εάν η εφαρμογή είναι ήδη μεταγλωττισμένη. Ο μεταγλωττιστής είναι περίπου το ήμισυ του ίδιου του Angular, επομένως η παράλειψή του μειώνει δραματικά το ωφέλιμο φορτίο της εφαρμογής.
• Ο μεταγλωττιστής AoT εντοπίζει και αναφέρει σφάλματα δέσμευσης προτύπων κατά τη διάρκεια του βήματος δημιουργίας προτού τα δουν οι χρήστες.
• Το AoT μεταγλωττίζει πρότυπα και στοιχεία HTML σε αρχεία JavaScript πολύ πριν αυτά εμφανιστούν στον πελάτη. Χωρίς πρότυπα προς ανάγνωση και χωρίς επικίνδυνη αξιολόγηση HTML ή JavaScript από την πλευρά του πελάτη, υπάρχουν λιγότερες ευκαιρίες για επιθέσεις ένεσης.

Διαμόρφωση πακέτου ιστού

Στον φάκελο config δημιουργήστε ένα νέο αρχείο webpack.config.prod.js

mode: 'production'

Συνήθως προχωράμε στη μεταγλώττιση AoT σε λειτουργία παραγωγής και, όπως έγραψα προηγουμένως, στο webpack 4, η επιλεγμένη λειτουργία λέει στο webpack να χρησιμοποιεί τις ενσωματωμένες βελτιστοποιήσεις του ανάλογα.

output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
}

Λέμε επίσης στο webpack να εξάγει τα πακέτα μας στον φάκελο dist . Περιλαμβάνουμε έναν κατακερματισμό στα ονόματα των αρχείων για να αξιοποιήσουμε αποτελεσματικά την κρυφή μνήμη σε επίπεδο πελάτη. Με αυτόν τον τρόπο το webpack γνωρίζει εάν ένα αρχείο έχει αλλάξει ή όχι. Το Webpack παρέχει placeholders για αυτόν τον σκοπό. Αυτές οι συμβολοσειρές χρησιμοποιούνται για την επισύναψη συγκεκριμένων πληροφοριών σε εξόδους. Τα πιο πολύτιμα είναι:

• Το [id] επιστρέφει το αναγνωριστικό τμήματος.
• Το [path] επιστρέφει τη διαδρομή του αρχείου.
• Το [name] επιστρέφει το όνομα του αρχείου.
• Το [ext] επιστρέφει την επέκταση. Το [ext] λειτουργεί για τα περισσότερα διαθέσιμα πεδία.
• Το [hash] επιστρέφει τον κατακερματισμό κατασκευής. Εάν αλλάξει οποιοδήποτε τμήμα της κατασκευής, αλλάζει και αυτό.
• Το [chunkhash] επιστρέφει έναν κατακερματισμό για συγκεκριμένο κομμάτι καταχώρισης. Κάθε entry που ορίζεται στη διαμόρφωση λαμβάνει ένα δικό του κατακερματισμό. Εάν αλλάξει οποιοδήποτε τμήμα της καταχώρισης, θα αλλάξει και ο κατακερματισμός. Το [chunkhash] είναι πιο κοκκώδες από το [hash] εξ ορισμού.
• Το [contenthash] επιστρέφει έναν κατακερματισμό που δημιουργήθηκε με βάση το περιεχόμενο.

Είναι προτιμότερο να χρησιμοποιείτε ιδιαίτερα τα hash και chunkhash μόνο για παραγωγή, καθώς ο κατακερματισμός δεν είναι απαραίτητος κατά την ανάπτυξη.

optimization: {
    noEmitOnErrors: true,
    splitChunks: {
        chunks: 'all'
    },
    runtimeChunk: 'single',
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true
        }),
         new OptimizeCSSAssetsPlugin({
             cssProcessor: cssnano,
             cssProcessorOptions: {
                 discardComments: {
                     removeAll: true
                 }
             },
             canPrint: false
         })
    ]
}

• Όπως και στη λειτουργία ανάπτυξης, θέλουμε να παραλείπουμε τη φάση εκπομπής κάθε φορά που υπάρχουν σφάλματα κατά τη μεταγλώττιση. Αυτό διασφαλίζει ότι δεν εκπέμπονται περιουσιακά στοιχεία με σφάλματα.
• Το chunks: ‘all’ υποδεικνύει ποια κομμάτια θα επιλεγούν για βελτιστοποίηση. Η παροχή all μπορεί να είναι ιδιαίτερα ισχυρή, επειδή σημαίνει ότι τα κομμάτια μπορούν να μοιραστούν ακόμη και μεταξύ ασύγχρονων και μη ασύγχρονων τμημάτων.
• Οι εισαγόμενες μονάδες αρχικοποιούνται για κάθε κομμάτι χρόνου εκτέλεσης ξεχωριστά. Όπως προτείνει το webpack, ενώ εργάζεστε σε ένα έργο με πολλαπλά σημεία εισόδου θέλετε να έχετε μόνο μία παρουσία χρόνου εκτέλεσης. Για αυτό πρέπει να το ρυθμίσετε σε ‘single’.
• Το UglifyJsPlugin χρησιμοποιεί το uglify-js για να ελαχιστοποιήσει τα αρχεία JavaScript. Ορίσαμε τις ιδιότητες cache και parallel σε true για να ενεργοποιήσουμε την προσωρινή αποθήκευση αρχείων και να χρησιμοποιήσουμε την παράλληλη εκτέλεση πολλαπλών διεργασιών για να βελτιώσουμε την ταχύτητα κατασκευής. Υπάρχουν περισσότερες διαθέσιμες επιλογές και σας προσκαλώ να μάθετε περισσότερα για αυτό το πρόσθετο.
• Το OptimizeCSSAssetsPlugin θα αναζητήσει στοιχεία CSS κατά τη διάρκεια της κατασκευής του webpack και θα το βελτιστοποιήσει και θα το ελαχιστοποιήσει. Ο επεξεργαστής CSS που χρησιμοποιείται για τη βελτιστοποίηση είναι cssnano. Όλα τα σχόλια θα αφαιρεθούν από το ελαχιστοποιημένο CSS μας και δεν θα εκτυπωθούν μηνύματα στην κονσόλα.

module: {
    rules: [
        {
            test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
            loader: '@ngtools/webpack'
        }
    ]
}
plugins: [
    new ngw.AngularCompilerPlugin({
        tsConfigPath: helpers.root('tsconfig.aot.json'),
        entryModule: helpers.root('src', 'app', 'modules', 'app', 'app.module#AppModule')
    })
]

Το @ngtools/webpack είναι το επίσημο πρόσθετο που το AoT μεταγλωττίζει τα Angular στοιχεία και τις μονάδες σας. Το πρόγραμμα φόρτωσης λειτουργεί με την προσθήκη webpack για τη μεταγλώττιση του TypeScript σας. Είναι σημαντικό να συμπεριλάβετε και τα δύο και να μην συμπεριλάβετε κανένα άλλο πρόγραμμα φόρτωσης μεταγλωττιστή TypeScript.

Προσθήκη αρχείου main.aot.ts

Στο φάκελο src προσθέστε το αρχείο main.aot.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app/app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Η καταχώρισή σας main είναι λίγο διαφορετική στη λειτουργία παραγωγής και στη συλλογή AoT:

• Εισαγάγετε enableProdMode για να απενεργοποιήσετε τη λειτουργία ανάπτυξης του Angular, η οποία απενεργοποιεί τους ισχυρισμούς και άλλους ελέγχους εντός του πλαισίου.
• Εισαγάγετε platformBrowser ΚΑΙ ΟΧΙ platformBrowserDynamic επειδή στη μεταγλώττιση AoT η εφαρμογή σας αποστέλλεται στο πρόγραμμα περιήγησης που έχει ήδη μεταγλωττιστεί, ενώ στη μεταγλώττιση JiT εμφανίζεται σε επίπεδο προγράμματος περιήγησης.
• Αντί να εισάγετε AppModule, πρέπει να εισαγάγετε AppModuleFactory που είναι η μεταγλωττισμένη σας εφαρμογή που δημιουργήθηκε από τον Angular μεταγλωττιστή μας.

Προσθήκη σεναρίων

Προσθέστε τα ακόλουθα σενάρια στο αρχείο package.json σας:

"webpack-prod": "cross-env NODE_ENV=production webpack --mode production"
"build:prod": "npm run build:clean && ngc && npm run webpack-prod && npm run build:clean"
"build:clean": "del-cli 'src/**/*.js' 'src/**/*.js.map' 'src/**/*.ngsummary.json' 'src/**/*.metadata.json' 'src/**/**/*.ngfactory.ts' 'src/**/*.ngstyle.ts' 'src/**/*.shim.ts'"
"serve": "lite-server"

• build:clean: ο μεταγλωττιστής Angular δημιουργεί πολλά αρχεία για να μεταγλωττίσει την εφαρμογή σας. Για να παραμείνουμε καθαροί στο έργο μας, διαγράφουμε όλα αυτά τα αρχεία πριν από τη μεταγλώττιση και μετά τη δημιουργία δεσμίδων.
• build:prod: εκτελέστε τον μεταγλωττιστή Angular με την εντολή ngc και, στη συνέχεια, εκτελέστε το webpack σε λειτουργία παραγωγής για να δημιουργήσετε τα πακέτα σας.
• serve: Χρησιμοποιώ τον lite-server για να εξυπηρετήσω την εφαρμογή μας και να δω πώς μοιάζει. Φυσικά, δεν θα το χρειαστείτε σε ένα πραγματικό έργο, επειδή η εφαρμογή σας θα εξυπηρετείται από το cloud.

Τώρα, μπορείτε να εκτελέσετε το npm run build:prod για να μεταγλωττίσετε την εφαρμογή Angular και να δημιουργήσετε τα πακέτα σας. Στη συνέχεια, εκτελέστε το npm run serve για να εμφανιστεί η εφαρμογή σας στο πρόγραμμα περιήγησης.

Ελπίζω να σας άρεσε αυτό το άρθρο! Εάν έχετε οποιεσδήποτε ερωτήσεις/προτάσεις, ενημερώστε με στα σχόλια παρακάτω.

Τα αρχεία του έργου βρίσκονται στο GitHub μου: