如何在Angular 5中减少vendor/script bundle.js [英] How to reduce vendor/script bundle.js in Angular 5

问题描述

我已经使用ng build -prod -aot -vc -cc -dop --buildOptimize减小了构建的应用程序的大小. 现在这就是我的情况:

I have already used ng build -prod -aot -vc -cc -dop --buildOptimize to reduce the size of the builded app. Now this is my situation:

是否可以减少(或拆分)这些较大的块? 有什么可以帮助我检查这些模块内部的东西吗?

Is it possible to reduce (or maybe split) these bigger chunks? Is there something that can help me to inspect inside these modules?

P.s.我已经使用过 webpack-analyzer 来检查情况，但是它不能深入研究这些文件.

P.s. I have already used webpack-analyzer to inspect the situation but it can't go deep into these files.

推荐答案

使用sourcemaps构建应用程序，然后使用诸如source-map-explorer之类的工具来详细说明正在使用的库的每个部分的大小.

Build your app with sourcemaps, then use a tool like source-map-explorer that details the size of every part of library that you're using.

常见库的一些提示:

• 如果您使用的是RxJS 5.5或更高版本，请使用.pipe(operator1(), operator2())语法，当您不使用许多不同的运算符时，它将显着减小RxJS的大小
• 如果您正在使用moment.js，请确保仅导入您正在使用的语言环境
• 如果您使用的是Angular Material，请确保您不导入未使用的模块
• 如果您正在使用引导程序和SASS，请仅导入.scss文件的所需部分

• If you're using RxJS 5.5 or higher, use the .pipe(operator1(), operator2()) syntax, it significantly reduces RxJS size when you don't use many different operators
• If you're using moment.js be sure to import only the locales you're using
• If you're using Angular Material, be sure you don't import unused modules
• If you're using bootstrap and SASS, import only the needed parts of .scss files

如果您尚未执行此操作，请将您的应用程序划分为惰性模块，这将减小初始块的大小.

If you didn't already do it, divide your app into lazy modules, it will reduce the size of the initial chunk.

这篇关于如何在Angular 5中减少vendor/script bundle.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！