首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 8中减小Vendor.js文件大小

可以通过以下几种方式实现:

  1. 使用Tree Shaking:Tree Shaking是一种优化技术,它可以通过静态分析代码,只保留被使用的模块和函数,从而减小打包后的文件大小。在Angular 8中,默认开启了Tree Shaking,可以通过在tsconfig.json文件中设置"module": "es2015"来启用。
  2. 使用AOT编译:AOT(Ahead-of-Time)编译是Angular的一种编译方式,它将模板编译为JavaScript代码,并在构建时生成优化的代码。与JIT(Just-in-Time)编译相比,AOT编译可以减小Vendor.js文件的大小。在Angular 8中,默认使用AOT编译,无需额外配置。
  3. 使用Lazy Loading:Lazy Loading是一种延迟加载模块的方式,可以将模块按需加载,从而减小初始加载时的文件大小。在Angular 8中,可以通过使用Angular的路由器来实现Lazy Loading。将不常用的模块设置为懒加载模块,可以减小Vendor.js文件的大小。
  4. 使用压缩工具:可以使用压缩工具对Vendor.js文件进行压缩,减小文件大小。常用的压缩工具有UglifyJS、Terser等。这些工具可以去除代码中的空格、注释,并进行代码优化,从而减小文件大小。
  5. 使用CDN加速:可以将Vendor.js文件上传到CDN(内容分发网络)上,并通过CDN加速来提高文件的加载速度。CDN可以将文件缓存到离用户更近的节点上,从而减小文件的加载时间。

推荐的腾讯云相关产品:腾讯云CDN(https://cloud.tencent.com/product/cdn)可以提供高速、稳定的全球加速服务,加速静态资源的分发,从而提高网站的访问速度。

总结:在Angular 8中减小Vendor.js文件大小的方法包括使用Tree Shaking、AOT编译、Lazy Loading、压缩工具和CDN加速等。这些方法可以有效地减小文件大小,提高网站的加载速度和性能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue加载优化,速度提高一倍。

分析文件大小 开始操作具体的优化方法之前,先来分析下哪些代码文件比较大,较大的文件可以进行压缩,使用 webpack-bundle-analyzer 来进行分析。...可以看到,项目中vendor.js文件最大,为 184.9 KB,该文件是Vue打包的时候自动生成的;通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的,如果没有使用可以进行删除。...app.css 文件大小为 1.1 MB,耗时2.42秒。 vendor.js文件大小为434 KB,耗时1.26秒。 app.js文件大小144 KB,耗时598毫秒。...方法二:采用 gzip 压缩 还记得文章开篇提到的用webpack-bundle-analyzer来分析文件大小吗,把鼠标移到某个文件上面,会提示现在文件的大小是多少,gzip压缩之后文件的大小, 要想进行...app.css 文件大小为 300 KB,耗时887毫秒。 vendor.js文件大小为131 KB,耗时610毫秒。 app.js文件大小30.7 KB,耗时342毫秒。

1.5K20

Vue webpack 压缩打包上线 首屏加载时间过长 优化方案

Vue 上线优化方案 #1 为什么要引入外部CDN 最近博客上线,但是首次加载的时候,需要消耗很多时间,大概50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下...network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大 ?...根据以上三点,具体优化步骤如下 : #2.1 登录页面(打开网站的第一个页面)图片 主要的处理方式就是减小图片的大小 我这里直接把登录页面的背景图片全部去掉,这样子直接可以省很多时间 #2.2 Router...引入外部CDN,就是说,不需要npm下载对应的库,从而减小vendor.js的体积,但是又不会影响库的正常使用,因为这些库放到CDN上之后,下载速度非常快,而且是并行的下载,下面就说说如何引入外部CDN...如何方面查看build之后的文件大小呢?我们可以使用另外一个 webpack 插件:webpack-bundle-analyzer ,如何使用呢?

1.8K30
  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. vendor.js...优化 由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!...$axios = axios; //Vue.use(iView) 1.3 第三步、打包忽视掉vue等包 webpack.base.conf.js , 把需要从cdn方式引入的依赖,都排除掉,包括 iview...vue axios 等等 如下图 1.4 最终重新打包 npm run build 可以发现 Vue 的vendor.js文件确实变小了很多,这样加载首页的时候 浏览器请求它的时候不会过大 可见vendor.js...gzip 最为擅长的是压缩纯文本文件,其效果非常明显,大约可以减少70%以上的文件大小,所以 Web 项目中开启 gzip 十分必要 3.2 nginx gzip如何配合vue使用 事先用Vue生成的

    1.5K22

    Webpack的异步加载原理及分包策略(深度好文,建议收藏)

    满足某种情况下,会执行具体模块中的代码。...代码中所有被 import()的模块,都将打成一个单独的包,放在 chunk 存储的目录下。浏览器运行到这一行代码时,就会自动请求这个资源,实现异步加载。...webpack 打包过程中,经常出现 vendor.js, app.js 单个文件较大的情况,这偏偏又是网页最先加载的文件,这就会使得加载时间过长,从而使得白屏时间过长,影响用户体验。...我们先用 webpack-bundle-analyzer 分析打包后的模块依赖及文件大小,确定优化的方向在哪。 ? 然后我们再看下打包出来的 js 文件 ?...从这里可以看出我们已经成功把 echart 和 iview 单独抽离出来了,同时 vendor.js 也相应地减小了体积。此外,我们还可以继续抽离其他更多的第三方模块。

    4.4K31

    lottie系列文章(二):lottie最佳实践

    如果项目的webpack配置项目内,需要自行进行配置或者联系payton。 第二步 需要使用lottie的页面中,在其index.html中引入bodymovin.js。...如果使用npm包的形式进行加载,那么vendor.js会增加40kb的大小,这样会使页面性能下降。...json文件 通过bodymovin插件导出的动画json文件大小也可能比较大(可能达到几十kb,负责的动画也可能上百kb),所以不建议将json数据内联到页面中,而最好是当做一个json文件来进行下载...unmount的时候,需要调用该方法 lottie-web常用的事件 我们lottie-web中可能也需要监听一些事件,比如加载完动画json文件时的data_ready事件。...遵循下面的方案,会使json文件减小: 尽量减少图层个数。每个图层都会导出成相应的json数据,图层减少能从很大程度上减小json大小。

    5.3K31

    Vue首屏加载速度优化,提升80%以上

    Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器加载该文件之后才能开始显示首屏。...若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。...html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。...可以beforeDestroy()生命周期内执行销毁事件;也可以使用$once这个事件侦听器,定义定时器事件的位置来清除定时器。...详细见vue官网 最终优化后的效果如下图:vendor.js文件从1M以上优化到256K左右,体积减少接近80%,排除服务器影响的因素,界面渲染速度基本都在1s左右,达到秒开效果,比之前快

    1.7K20

    腾讯企鹅辅导 H5 性能极致优化

    先观察 DOMContentLoaded 阶段,发现最长请求路径 vendor.js ,JS大小为 170kB,花费时间为 4.32s。...分析vendor.js的具体构成(上图) 以 string-strip-html.umd.js 为例 大小为34.7KB,占了 vendor.js 的 20%体积,但只有一个页面多次使用到了这个包,触发了...miniChunks 的规则,被打进了 vendor.js。...同理对 vendor.js 的其他模块进行分析,iosSelect.js、howler.js、weixin-js-sdk 等模块都只有 3、4 个页面/组件依赖,但也同样打进了 vendor.js。...优化效果:移动端 正常网络情况下图片体积减小 220%、弱网情况下图片体积减小 13 倍。 注意实际业务中需要视觉同学参与,评估图片的清晰度是否符合视觉标准,避免反向优化!

    1.2K20

    腾讯企鹅辅导 H5 性能极致优化

    先观察 DOMContentLoaded 阶段,发现最长请求路径 vendor.js ,JS大小为 170kB,花费时间为 4.32s。...分析vendor.js的具体构成(上图) 以 string-strip-html.umd.js 为例 大小为34.7KB,占了 vendor.js 的 20%体积,但只有一个页面多次使用到了这个包,触发了...miniChunks 的规则,被打进了 vendor.js。...同理对 vendor.js 的其他模块进行分析,iosSelect.js、howler.js、weixin-js-sdk 等模块都只有 3、4 个页面/组件依赖,但也同样打进了 vendor.js。...优化效果:移动端 正常网络情况下图片体积减小 220%、弱网情况下图片体积减小 13 倍。 注意实际业务中需要视觉同学参与,评估图片的清晰度是否符合视觉标准,避免反向优化!

    1.2K20

    JavaScript 文件优化指南

    最小化 JavaScript 文件的最小化包括删除不必要的字符、空白和注释,以减小文件大小。通过减少需要从服务器传输到客户端浏览器的数据量,它有助于缩短加载时间。...image.png 压缩 使用 gzip 压缩等技术压缩 JavaScript 文件可以减小文件大小。压缩后的文件从服务器发送到浏览器并解压执行,从而加快下载速度并提高网站性能。...它能在构建过程中消除 JavaScript 模块中未使用的代码,从而减小文件大小并提高性能。「Tree shaking」有助于优化向浏览器交付必要代码的过程。...通过 Webpack,你可以捆绑和合并 JavaScript 文件,优化文件大小,并应用tree shaking和代码分割等高级优化功能。它还支持构建过程中集成其他优化工具和插件。...它能删除不必要的字符、重命名变量并进行其他优化,以减小文件大小。它支持 ECMAScript 5 和高级版本,因此与现代 JavaScript 代码兼容。

    20710

    Angular 工具篇之分析包的大小

    初始化 angular6-example-app 克隆 angular6-example-app $ git clone https://github.com/Ismaestro/angular6-example-app.git...因为 angular6-example-app 项目已经默认安装了 webpack-bundle-analyzer 这个库,所以我们不需要再次安装该库,对于其它的项目来说的话,你可以项目目录下执行下面的命令来执行安装操作...: $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目,构建的时候,需要添加相关参数,具体如下: $ ng build...--prod --stats-json 当项目构建完成后,根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:... angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下: "bundle-report": "ng build --prod --stats-json

    2.4K40

    「前端架构」React,Angular和Vue:哪一个最好,我选Angular

    本次讨论中,我们将比较三种最流行的前端开发技术--Angular,React和Vue。我们正在基于项目架构或从开发人员的角度讨论这种比较,他们将为新项目选择技术。...所以进行更深入的比较之前,我们首先需要确定需要哪一个 - 库或框架?实际上,库设计用于执行某些特定任务,它们通常并不复杂。...Facebook多个页面上使用React用于许多组件,但不用于创建单个页面应用程序。...Angular最适合作为基于SPA的应用程序的框架。 性能 在库或框架的大小的情况下,Angular相对于其他选项而言相当大。gzip文件大小为143k,而Vue为23k,React为43k。...整体分析中,Vue具有出色的性能和三者最深的内存分配。但是所有这三个选项性能方面都非常接近。

    91130

    为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    但是,去年 Vue.js 互联网上声势浩荡地掀起了千层浪,已经显示出了足够的优势,并且 Angular 和 React 力不从心的一些场景下,Vue.js 已经成为了潜在的备选项。...当开发者使用 Angular 的时候这两者的区分会令人非常困惑。 由于 Vue 没有使用脏检测,所以“性能比 Angular1 更好”。...Angular2 使用“组件”替换掉了之前的“控制器”。 Angular2 JavaScript 舞台上俨然已经成为了一个大腕儿,但是某些场景下,Vue2.0 仍然个更好的选择。...Angular2 可以通过离线编译和摇树特性(tree-shaking)来减小代码体积,但是 Vue2 依旧更轻量。...摇树特性(tree-shaking)通过移除无用的代码减小了代码体积,但是,当你从框架中引入并使用更多的特性时,app 的体积就又飙上去了。

    1.9K30

    图片优化技巧提升网站加载速度

    JPEG格式适用于复杂的照片和图像,可以提供较高的图像质量和较小的文件大小。PNG格式适用于简单的图标和透明背景的图片,提供较高的图像质量但文件大小较大。...GIF格式适用于简单的动画图像,文件大小较小但图像质量较低。 二、压缩图片文件大小通过压缩图片文件大小可以大幅度减少页面加载时间。...使用专业的图片编辑工具或在线压缩工具,可以压缩图片的文件大小而不损失太多的图像质量。同时,还可以使用现代浏览器自带的压缩算法,如WebP格式,保持较高图像质量的同时减小文件大小。 ...通过调整图片尺寸、裁剪或缩放图片,可以不损失太多细节的情况下减小图片文件大小,提高加载速度。 ...设计和开发网站时,请务必注意图片优化的重要性,并采取相应的措施来优化图片,以确保用户能够快速访问和浏览网站内容。 在当前互联网时代,用户对网站的访问速度和体验要求越来越高。

    31040

    前后端分离探索——MVC 项目升级的一个过渡方案

    传统 MVC 项目直接升级到前后端分离需要大量的时间与人力,在业务多变的阶段并不适合,所以便有了本文的过渡方案探索 路由先不分离,仍然采用 PHP 提供的路由 模板部分分离,原 PHP 模板中,引入...安装前端依赖 Yarn 前端编译,此时,PHP 模板中已正确引入 Vue 访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面 # 局限 不能做到全局自动加载组件 编译后的文件大小可能会很大...# 更新 2020/03/13 随着页面重构,文件越来越多,导致编译后总文件大小足足 150 M,而且 Git 合并困难,大大降低了开发效率和前端性能,这明显不合预期; 分析原因:每个页面都引入了公共模块..."/mix/dist{{ get_version('/js/manifest.js') }}"> <script src="/mix/dist{{ get_version('/js/<em>vendor.js</em>...18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 /public/mix/resources/js 文件夹可以删掉了,编译后的总<em>文件大小</em>约

    1.2K20
    领券