使用 Angular CLI 和 Webpack 分析包尺寸

–>

使用 Angular CLI 和 Webpack 分析包尺寸

使用 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

     

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

使用 Angular CLI 和 Webpack 分析包尺寸

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

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

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

See also

  • Analyzing bundle size with the Angular CLI and Webpack

  • Webpack bundle analyzer
  • https://webpack.github.io/analyse
  • Angular CLI build

posted on 2018-04-10 12:33 冠军 阅读() 评论() 编辑 收藏

原文链接:https://www.cnblogs.com/haogj/p/8776621.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章