Angular6项目打包优化的实现方法

可以从以下三个角度优化：

  • 输出包体组成分析文件
  • Rollup 摇树优化
  • 导出Webpack配置，通过修改webpack配置优化打包

让我们来逐一分析。

输出包体组成分析文件

Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer，会自动分析包体组成结构，并以一种可视化的方式显示。

使用步骤:

  1. 打开项目，命令行输入：npm install webpack-bundle-analyzer --save-dev
  2. 命令行输入项目打包命令加--stats-json
  3. 在package.json文件的"scripts"里配置里，添加"bundle-report": "webpack-bundle-analyzer dist/wp/stats.json"
  4. 命令行输入：npm run bundle-report
  5. 浏览器输入：http://127.0.0.1:8888/ 查看分析图，根据分析图了解一些优化的细节

备注：在不影响性能的情况下，尽量少用Base64引入图片，把图片放在本地引入，不会打包到项目中去，但使用Base64编码的图片，会以图片的1.5倍体积打包到项目中去，且若该图片为精灵图，使用图片时采取了div切图，切了几次，就会打包几次，占用体积非常大。具体可以参考以下：https://www.imooc.com/article/27804

Rollup 摇树优化

所谓Rollup是指Webpack2会把那些应用中未使用的引用代码除掉，但不会删除这些代码，所以就需要配合 UglifyJs 能够智能的

移除这些未使用的代码。从而减少包体大小。

而Agnular应用是基于Typescript，因此Angular Cli提供了一个叫 Angular Build Optimizer 插件，将 Typescript 编译结果转化成更友好的UglifyJs版本。这样UglifyJs就能够更有效的移除那些未使用的代码

方法一：Angular Cli只需要在打包命令中加上 --build-optimizer 参数就可以，在一些情况下压缩的还是很厉害的（但我做优化的过程中，使用了这样的方法，毫无作用）

方法二：去掉没有用到的模块，从而减小体积

1、moment

对于 ng-cli 的项目:

（1）运行npm uninstall moment

（2）运行npm install moment --save-dev

（3）.angular-cli.json 文件的 scripts

里加上"../node_modules/moment/min/moment.min.js"

（4）typings.d.ts 文件的最后加上 declare var moment: any;

（5）将项目中的代码 import * as moment from 'moment';全部干掉

备注：如果想应用其中某个库则需要（以 fr 为例）

引入：import "moment/locale/fr";

使用：moment.locale("fr");

对于 webpack 的项目：

（1）在 webpack 配置文件的 plugins 里加上

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, / /)

或者

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

备注：如果想应用其中某个库则需要（以 de、fr、hu 为例），在 webpack 配置文件的 plugins 里加上
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

2、@ng-bootstrap/ng-bootstrap

如果在项目中要用到 @ng-bootstrap/ng-bootstrap 库，要注意一下使用方法，如果按照其官网示例方式引入的话，在打包的时候会把其下所有模块引入进来，不管你用没用到。所以要想办法把没有用到的模块干掉，只引入需要的模块。

以时间组件为例，官网示例：

// 根模块
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...],
 bootstrap: [AppComponent]
})
export class AppModule {
}
// 其他需要模块
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...],
})
export class OtherModule {
}

更改为：

// 根模块
import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbDatepickerModule.forRoot(), NgbTimepickerModule.forRoot() ...],
 bootstrap: [AppComponent]
})
export class AppModule {
}
// 其他需要模块
import {NgbDatepickerModule, NgbTimepickerModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbDatepickerModule, NgbTimepickerModule, ...],
})
export class OtherModule {
}

导出Webpack配置

方法一：eject（Angular6可能不支持）

方法二：工具库ngx-build-plus

我期望通过导出Webpack配置的方式，使scss文件与main.js打包分离，仍在实践中，成功后续更。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • es6+angular1.X+webpack 实现按路由功能打包项目的示例

    需求来源 之前使用jspm来打包项目 但是有个最大的缺点,就是只能把项目打包成一个大的js,当项目开发到后期会很大,网上找了很久也没找到合理的jspm打包方式. 所以开始调研可以打包angular项目成多个文件的工具. 调研过程 过程中看了些 vue,react配合webpack按路由功能打包的demo,感觉webpack对于打包成多个文件比较擅长. 结果 第一步 核心模块依赖加载 #core.module.js //核心模块 import 'angular-route'; //官方路由依赖 i

  • Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 启动本地静态服务器 其他 目标 一键安装项目所有的依赖模块 一键安装项目所有的依赖库 代码检查确保严格语法正确 能将angularjs的html装换成js模块并且压缩到js文件中 将所有css文件合并压缩 将所有的js文件合并压缩 动态引入资源文件 拥有开发环境和生产环境两种打包方式 工具 npm基于

  • Angular项目从新建、打包到nginx部署全过程记录

    前言 当前,AngularJS作为Javascript的MVC(也有人说是MV*,暂且不纠结这个)框架被广泛使用,它为更快且更容易地开发响应式的Web提供了强大的机制.作为MVC框架,它将Web前端代码分成三个组件Model,View和Controller.因此,在data model,应用逻辑(Controllers)和view展示之间有明确的分离,让你更容易地关注关键的开发区域.view接收来自model的数据来展示.当用户通过点击或者敲击键盘和应用交互时,controller通过改变模型中

  • angular2+node.js express打包部署的实战

    Angular2我自己还在摸索学习中,本文介绍了angular2+node.js express打包部署的实战,分享给大家,也给自己留个笔记 angular是客户端js,Node.js 是服务端JS,建立SPA 网站需要把这两者统一到一起. 1.angular2项目创建,使用angular-cli ng new mypos 2.使用express命令行工具创建express项目. express --view=hbs 3.angular2 中 需要引用到第三方库 例如 jQuery,bootst

  • 使用ng-packagr打包Angular的方法示例

    写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015.FESM5.UMD.ESM2015.ESM5.ES2015 格式,不同格式可以在不同的环境(Angular Cli.Webpack.SystemJS等)中使用. 传统方式需要对这些格式逐一打包,一个示例打包脚本写法.这种写法只能针对不同项目的配置,而且除非你了解这些格式的本质否则很难维护:后来社区根据 APF 规范实现了类库 ng-

  • 简单谈谈关于Angular Cli打包的事

    本文主要给大家介绍了关于Angular Cli打包的事,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.引言 Angular从开发再到生产环境部署都离不开Angular Cli工具集,而Angular Cli本质上是使用 Webpack(当前使用版本为2) 来打包资源. Webpack 本身并不复杂,略用过一点都清楚,只需要创建一个 webpack.config.js 的文件并简单的配置,就可以把一个复杂的应用所有文件全部打包成若干静态资源文件. 然而一个复杂的应用免不了使

  • Angular6项目打包优化的实现方法

    可以从以下三个角度优化: 输出包体组成分析文件 Rollup 摇树优化 导出Webpack配置,通过修改webpack配置优化打包 让我们来逐一分析. 输出包体组成分析文件 Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer,会自动分析包体组成结构,并以一种可视化的方式显示. 使用步骤: 打开项目,命令行输入:npm install webpack-bundle-analyzer --save-dev 命令行输入项目打包命令加--stats-json 在pac

  • 记一次react前端项目打包优化的方法

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • vue项目打包优化的方法实战记录

    vue项目打包优化的方法实战记录

    目录 1.按需加载第三方库 2.移除console.log 3. Close SourceMap 4. Externals && CDN 5.路由懒加载的方式 总结 1.按需加载第三方库 例如 ElementUI.lodash 等 a, 装包 npm install babel-plugin-component -D b, babel.config.js module.exports = { "presets": [ "@vue/cli-plugin-babe

  • vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置

  • Vue项目打包优化实践指南(推荐!)

    Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

  • 使用electron将vue-cli项目打包成exe的方法

    如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron

  • springBoot项目打包idea的多种方法

    War包 1.首先在启动类继承SpringBootServletInitializer @SpringBootApplication public class DemoApplication extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.s

  • IDEA 将 SpringBoot 项目打包成jar的方法

    新建SpringBoot项目:IDEA 创建 SpringBoot 项目 一.打包配置 1.File -> Project Structure 2.Project Structure 3.设置启动类及META-INF 根据 modules 创建 jar.如图所示,选择项目,入口类等.最后一项 META-INF 默认放到 src\main\java 目录里,如果使用默认值,没有进行其他配置,生成的 jar 有可能不会包含 META-INF 目录,导致运行 jar 出错,正确的是将 META-INF

  • Python项目打包成二进制的方法

    Python项目打包 python本身是一种脚本语音,发布的话,直接发布源代码就可以了,但是,可能有些公司并不想发布源代码,那么,就涉及到打包了,网上有很的打包教程,其实我也没有认真去研究,因为我只想简单点,所以,我打算直接编译成pyc二进制文件来发布,就可以了. 问题 编译成二进制文件(*.pyc)之后,文件名都变了,模块之间怎么引用? 网上的例子,大都是对单个文件编译的介绍,对整个目录编译的话,也都是输出到相应的文件夹下,需要单独抽取出来,发布. 解决问题 一般编译之后的文件命名为:比如我的

  • vue项目打包发布上线的方法步骤

    vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

随机推荐