使用 Angular CLI 和 Webpack 分析包尺寸

对于 Web app 来说,高性能总是最高优先级,对于 Angular 也不例外。但是随着应用复杂度的不断增长,我们如何才能知道哪些内容打包到了应用中呢?如何跟踪包的尺寸?我们不希望一次发送太多的 JavaScript ,以至于拖慢应用的速度。

过大尺寸的 JavaScript 包是丧失用户欢心的良药。不仅是拖慢了下载效率,而且要花费更多的时间在浏览器中分析然后执行。为了保持应用的速度,我们需要确保包尺寸足够小(250k 或更小),并在适当的时间加载。

在这篇文章中,我们将使用 Angular CLI 和一些简单的命令来获得我们发布产品的 Angular 应用包的详细报告。

Angular CLI

1. 首先,我们需要有一个应用作为分析对象。使用 Angular CLI 的 new 命令可以很简单地创建一个 Angular 应用。

ng new [应用名称]

应用将被创建在应用名称的文件夹中。

查看 new 的详细信息

2. 然后,我们可以产品模式编译应用,我们使用 CLI 的命令进行编译。

这里涉及到两个主要参数 prod 和 stats-json

2.1 prod

产品模式编译使用参数 prod,下面是 dev 和 prod 的区别

使用 --dev/--target=development 和 --prod/--target=production 两者都影响元标志,如果没有指定,默认为 --dev .

Flag --dev --prod
--aot false true
--environment dev prod
--output-hashing media all
--sourcemaps true false
--extract-css false true
--named-chunks   true false
--build-optimizer false true with AOT and Angular 5

--prod 还设置了下列的设置:

  • 如果在 .angular-cli.json 中进行了配置,添加 service worker.
  • 在模块中,使用 production 替换 process.env.NODE_ENV 的值。
  • 对代码执行 UglifyJS .

2.2  --stats-json

该参数用于生成可以使用  webpack-bundle-analyzer 或者 https://webpack.github.io/analyse  分析包结构的 stats.json 文件。

2.3 实际执行的命令

ng build --prod --stats-json

查看 build 的详细信息

Webpack bundle analyzer

States.json 是 Webpack 的一个特殊文件,webpack 是 Angular CLI 内部所使用的打包工具。使用 Webpack 帮我们生成的这个文件,我们可以使用各种不同的工具来理解我们的应用。

我们这里使用的工具是  Webpack bundle analyzer 。webpack 包分析器是一个 npm 包,可以在 webpack 的配置中或者命令行使用。对于我们来说,我们使用命令行工具。

为了使用这个工具,我们需要如下步骤:

  1. 通过 npm 安装这个工具

    npm install --save-dev webpack-bundle-analyzer
  2. 为方便使用,安装之后,在 package.json 中的 scripts 部分,添加下面的行来创建自定义的 npm 命令 
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  3. 执行命令 
    npm run bundle-report

如果命令成功执行的话,你会看到打开了一个浏览器窗口,并看到类似如下的页面。

途中的每种颜色代表一个独立的包。在这个图中,可以看到我们有三个包,vendor 中包含所有的库代码,polyfill 包和 main 应用代码包。我们可以近一半查看未压缩和压缩之后的尺寸。这使得我们快速检查最大的包,并帮助我们决定何时使用 Lazy Loading 进一步拆分应用。

对于这个示例来说,可以看到应用的主要部分是 framework 部分,因为应用太简单了,在 main 中只有很少的组件。使用这个工具,我们可以看到虽然 Http 模块没有被使用,但是也被打包到应用中了。在移除这个未用到的模块之后,应用比以前变得更小更快了。

随着应用的成长,我们可以通过运行 npm run bundle-report 来仔细分析和检查依赖关系,以保持应用的尺寸和速度。

See also

使用 Angular CLI 和 Webpack 分析包尺寸的更多相关文章

  1. [转]Angular CLI 安装和使用

    本文转自:https://www.jianshu.com/p/327d88284abb 一. 背景介绍: 两个概念: 关于Angular版本,Angular官方已经统一命名Angular 1.x统称为 ...

  2. 使用Angular CLI进行Build (构建) 和 Serve

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  3. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

  4. 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...

  5. (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  6. Protrator 官网和下载工具稍慢 , 但能使用. Angular CLI 内置 官方推荐 TS的 demo 不明显 , 而且依赖无法安装

    npm uninstall -g protractor  && cnpm install -g protractor && protractor --version 复 ...

  7. .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm ...

  8. Angular 8 - 更小的包

    Angular 8 - 更小的包 Angular 8 发布 原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli- ...

  9. Cordova CLI源码分析(四)——创建工程

    在第一篇分析我们曾经举例,创建一个新工程, cordova create hello hellotest com.xxx.hellotest cli.js文件分析命令行参数后,会走到 else if  ...

随机推荐

  1. The method queryForMap(String, Object...) from the type JdbcTemplate refers to the missing type DataAccessException

    Add spring-tx jar of your spring version to your classpath.

  2. IPFS: BitSwap协议(数据块交换)

    原创 2018-01-11 飞向未来 IPFS指南 BitSwap协议 IPFS节点之间是如何进行数据交换的?本文来讲一下这个问题. IPFS在BitTorrent的基础上实现了p2p数据交换协议:B ...

  3. IPFS开发团队是如何工作的?

    小编不是一个很八卦的人,连当红明星都认不全.不过,今天还是带领大家来扒一扒ipfs开发团队是如何工作的. 工作方式: 全体会议:每周一有一个全体会议,这个会议是提前安排好的一个日程 任务讨论:把大任务 ...

  4. 桶排序/基数排序(Radix Sort)

    说基数排序之前,我们先说桶排序: 基本思想:是将阵列分到有限数量的桶子里.每个桶子再个别排序(有可能再使用别的排序算法或是以递回方式继续使用桶排序进行排序).桶排序是鸽巢排序的一种归纳结果.当要被排序 ...

  5. 【Python】 html解析BeautifulSoup

    BeautifulSoup bs是个html解析模块,常用来做爬虫? ■ 安装 BeautifulSoup可以通过pip来安装,用pip install beautifulsoup4 即可.但是仅仅这 ...

  6. Spring Cloud Contract

    http://www.infoq.com/cn/news/2017/04/spring-cloud-contract 在默认情况下,我们希望用户以JAR文件的形式将生产者存根和契约发布到Maven库. ...

  7. 爬虫(scrapy中的ImagesPipeline)

    在使用ImagesPipeline对妹子图网站图片进行下载时,遇到302错误,页面被强制跳转. 解决办法如下: # -*- coding: utf-8 -*- # Define your item p ...

  8. 用python程序来画花

    from turtle import * import time setup(600,800,0,0) speed(0) penup() seth(90) fd(340) seth(0) pendow ...

  9. react的基本使用,及常用填坑

    import React, { Component } from 'react'; import PropTypes from 'prop-types'; import './First.css'; ...

  10. C语言--总结报告

    1.当初你是如何做出选择计算机专业的决定的? 经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 当初填报志愿我是有很明确的专业方向的,就是IT类的 ...