Ionic 3如何仅在登录页面引入第三方库particles.js

刚好我之前在Ionic 3项目里实现过类似的需求——只让particles.js（angular-particle封装版）在登录页面加载，全局导入确实会让整个应用都带上这个库的代码，太浪费资源了。其实只要利用Ionic的懒加载机制，把库的模块局部导入到登录页面的专属模块里就行，下面是具体的操作步骤：

1. 确认依赖安装（若未安装） #

如果还没安装angular-particle包，先执行安装命令：

npm install angular-particle --save

2. 关键：配置登录页面的懒加载模块 #

Ionic 3的懒加载页面都有自己的*.module.ts文件，我们只需要在这里导入angular-particle的模块，不要在全局的app.module.ts里导入。修改login.module.ts：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
// 导入angular-particle模块
import { AngularParticleModule } from 'angular-particle';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
    // 把模块加入当前页面的imports数组，这样只有登录页面能识别该库的指令/组件
    AngularParticleModule
  ]
})
export class LoginPageModule {}

注意：如果之前在app.module.ts里导入过AngularParticleModule，请务必把它从app.module.ts的imports数组中移除，否则还是会全局加载该库。

3. 在登录页面组件中使用粒子特效 #

组件逻辑（login.ts） #

在登录页面的ts文件里定义粒子特效的配置参数（可以根据自己的需求调整）：

import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';

@IonicPage() // 确保这个装饰器存在，开启懒加载
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  // 粒子特效的配置参数，可按需调整
  particleParams = {
    particles: {
      number: {
        value: 60,
        density: {
          enable: true,
          value_area: 700
        }
      },
      color: {
        value: '#ffffff'
      },
      shape: {
        type: 'circle'
      },
      size: {
        value: 3
      }
    },
    interactivity: {
      events: {
        onhover: {
          enable: true,
          mode: 'grab'
        }
      }
    }
  };

  constructor() {}

  // 你的登录逻辑代码...
}

页面模板（login.html） #

在模板里添加粒子特效的标签，通常把它作为背景放在最底层：

<ion-content>
  <!-- 粒子特效容器，设置绝对定位作为背景 -->
  <particles 
    [params]="particleParams" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"
  ></particles>
  
  <!-- 你的登录表单内容 -->
  <div class="login-container">
    <ion-list>
      <ion-item>
        <ion-label floating>用户名</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>密码</ion-label>
        <ion-input type="password"></ion-input>
      </ion-item>
    </ion-list>
    <button ion-button block>登录</button>
  </div>
</ion-content>

4. 确保登录页面是懒加载状态 #

要确认以下几点，保证登录页面是懒加载的：

• login.ts顶部有@IonicPage()装饰器
• app.module.ts中没有声明LoginPage，也没有导入它
• 跳转登录页面时使用懒加载的方式，比如：

  // 在其他页面跳转登录页
  this.navCtrl.push('LoginPage');
  

这样配置完成后，angular-particle库就只会在登录页面被加载，其他页面的打包文件里不会包含这个库的代码，完美实现按需加载的效果。

内容的提问来源于stack exchange，提问作者JDalri