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

对于vendor.js为2MB,app.js为720KB的Angular JS应用,如何缩小大小?

要缩小vendor.js和app.js的大小,可以采取以下几种方法:

  1. 代码压缩和混淆:使用工具对代码进行压缩和混淆,去除不必要的空格、注释和换行符,减小文件体积。常用的工具有UglifyJS、Terser等。
  2. 按需加载:将应用中的模块按需加载,而不是一次性加载所有模块。这样可以减少初始加载的文件大小。可以使用Angular的懒加载特性来实现按需加载。
  3. 代码拆分:将应用中的代码拆分成多个小模块,按需加载。这样可以减小每个模块的文件大小,提高加载速度。
  4. 使用Tree Shaking:通过静态分析代码,去除未使用的代码块,减小文件大小。在Angular中,可以使用工具如Webpack来进行Tree Shaking。
  5. 图片和资源优化:对于应用中使用的图片和其他资源,可以进行压缩和优化,减小文件大小。可以使用工具如imagemin、svgo等来进行优化。
  6. 使用CDN加速:将静态资源部署到CDN(内容分发网络),可以通过就近访问加速文件加载速度,减小服务器负载。
  7. 使用gzip压缩:在服务器端启用gzip压缩,将文件在传输过程中进行压缩,减小文件大小。
  8. 使用动态导入:对于一些较大的第三方库或模块,可以使用动态导入的方式,在需要时再加载,而不是一开始就加载全部。
  9. 优化图片加载:对于应用中的图片,可以使用lazy loading、progressive loading等技术,提高图片加载效率。
  10. 使用缓存:合理利用浏览器缓存机制,减少重复加载文件的次数,提高加载速度。

以上是一些常见的方法,可以根据具体情况选择适合的优化策略。对于Angular JS应用,可以结合使用Angular CLI、Webpack等工具进行打包和优化。腾讯云提供的相关产品和服务可以参考腾讯云官方文档和产品介绍页面。

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

相关·内容

webpack实战——打包优化【中】

前言 上篇从多线程打包和缩小打包作用域两个方面入手,对webpack打包层面做出优化。本篇描述从动态链接库思想方面继续深入探究打包层面的深度优化。...今天要介绍的主角“DLLPlugin”则借鉴了动态链接库的思路,对于第三方模块或者一些不常变化的模块预先进行编译和打包,然后再项目实际构建过程中直接取用。...在工程的webpack配置文件中(注意是webpack.config.js,不是vendor的配置文件),通过DLLReferencePlugin来获取刚才打包好的资源清单,然后在页面中添加vendor.js...vendor.js"> app.js"> 设置完毕后,当页面执行到vendor.js...时,会声明全局变量dllExample,而manifest相当于注入app.js的资源地图,app.js会通过name字段找到名为DLLExample的library,再进一步获取其内部模块。

89750

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

可以看到,项目中vendor.js文件最大,为 184.9 KB,该文件是Vue打包的时候自动生成的;通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的,如果没有使用可以进行删除。...此外,把鼠标移到某个文件上面,还可以看到提示如果采用 gzip 压缩后的大小,比如vendor.js提示如果采用 gzip 进行压缩,压缩后的大小为61.26 KB,文件变小了,加载速度自然就快了嘛。...vendor.js文件大小为434 KB,耗时1.26秒。 app.js文件大小144 KB,耗时598毫秒。 一张 png 图片大小347 KB,耗时1.51秒。...在编译打包的时候,.map文件的生成是由 config/index.js文件的 「productionSourceMap」属性来控制的,为true的时候,会生成.map文件,为false的时候,不会生成...app.css 文件大小为 300 KB,耗时887毫秒。 vendor.js文件大小为131 KB,耗时610毫秒。 app.js文件大小30.7 KB,耗时342毫秒。

1.5K20
  • 【原创】Webpack构建的hash优化,vue-cli项目为例

    背景: SPA的vue应用,采用webpack2构建,打包入口为main.js 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成mainfest.js...:只有对应页面js的hash值改变 √ ?...上述场景【4】为例: app.js因为内容变化(引入新模块)而变化 页面模块因为module.id变化(新引入静态模块,打乱顺序)而变化 vendor因为打包进的各个模块module.id发生变化 runtime...优化后的速度和压缩率 比对: 构建总时间(第一次) 构建总时间(3次平均) 构建总大小(第一次) 构建总大小(3次平均) 初始 64849ms 64882ms 2.50MB 2.50MB 优化后 63867ms...62276ms 2.50MB 2.50MB 改动后构建速度和大小没有明显变化,构建时间稍微减少1~2秒。

    2K40

    如何使用Angular CLI和PM2运行Angular应用程序

    PM2是Node.js应用程序的流行,高级且功能丰富的生产流程管理器,具有内置负载均衡器。其功能集包括对应用程序监视,微服务/进程的高效管理,运行应用程序集群模式以及应用程序的正常重启和关闭的支持。...此外,它还支持轻松管理应用程序日志等等。 在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。...CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app,将其替换为应用程序的名称)...$ cd /www.linuxidc.com/www/ $ sudo ng new linuxidc-app        #按照提示 接下来,进入刚刚创建的应用程序(完整路径为...第4步:使用PM2永远运行Angular项目 要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。

    2.2K30

    Vue.js应用性能优化二

    在Vue.js中的延迟加载和代码拆分文章中,我们了解了代码拆分是什么,它如何与Webpack一起工作以及如何在Vue应用程序中使用延迟加载来使用它。...现在我们将深入研究代码,并学习最有用的Vue.js应用程序代码分割模式。 通过使用以下技术,我们能够将初始bundle的大小减少70%并使其在眨眼间加载。...所有js代码都被打包到一个文件 — app.js 您可能已经注意到,根据我们访问的路由,我们可能不需要Home.vue或About.vue(依赖lodash)但它们都在相同的app.js包中,无论路由用户是什么...通过此设置,webpack将创建三个包: app.js - 我们的主要包含应用程序入口点(main.js)和每个路由所需的库/组件 home.js - home页面bundle,只有在输入/路径时才会下载...即使我们只需要在一个路由中使用lodash(它是其中一个依赖项),但是现在它被捆绑在vendor.js中以及所有其他依赖项中,因此它将始终下载。

    2K30

    带你走近AngularJS - 基本功能介绍

    这是一个功能简单的指令,在后续的章节将展示如何创建一些复杂指令。...注意应用中module、controller和filter 作为特性值应用。它们代表JavaScript 对象,因此名称是区分大小写的。...                       angular.min.js 假设如果你仅希望项目中使用一个模块,你可以如此定义: // app.js angular.module("appModule...例如,一个应用包含三个模块app、controls、和data : // app.js (名称为app的模块依赖于controls和data模块) angular.module("app", [ "controls...(data 模块没有依赖项,数组为空) angular.module("data", []) 应用的主页面中需要声明ng-app 指令, AngularJS 会自动添加需要的引用: <html ng-app

    3.1K100

    React 基础知识

    (下) 这两篇文章的讲解,再进行 React 的学习 WebPack app 文件夹主要存放着我们项目的代码,static文件夹存放静态资源文件,util文件夹存放工具函数,index.jsx为 React...的入口文件,index.tmpl.html为模板文件,app.js是我们项目的业务代码, vendor.js为第三方依赖包,webpack.config.js为开发时的配置文件,webpack.production.config.js...为发布时的配置文件 在开发过程中,我们可以不用考虑系统的性能,更多考虑的是如何增加开发效率,所以我们会把所有的代码,统一打包为bundle.js文件,但若是将项目上线,我们就需要考虑系统的加载速度、缓存等等因素...,所以我们会把业务代码和第三方依赖包的代码分开打包,分别对应app.js和vendor.js文件,这样做的好处是,当我们进行项目的更新时,只需要更新app.js文件即可 因为我是在 Mac OS 环境下进行开发的...,代码中NODE_ENV=dev代表当前是开发环境下,这里的dev可被 JS 代码中的process.env.NODE_ENV 得到并做一些其他处理,而NODE_ENV=production则标识的是开发环境

    60340

    基于requirejs和angular搭建spa应用1、常规实现2、引入Requirejs

    接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分:   1)app.js 入口   ...文件以home模块为例: home.controller.js 1 angular.module('app') 2 .controller('HomeController', HomeController...上述代码能正常运行,但是我们发现一个问题,当前js文件或者说模块较少,我们引入不会有很大的问题,但是当我们的应用变得很大,文件几十甚至上百个,如何处理呢,有人说当然使用构建工具了,一个一个引入多慢呢,构建工具当然可以做到批量引入...angular.bootstrap(document,[app.name]); 16 }) 17 }) app.js修改如下: 1 define(['angular', 'ui_router'...; 8 } 9 }) 最后修改修改index.html中脚本引入方式,以及去掉ng-app指令启动方式,angular应用启动已在main.js中通过domready后使用脚本启动。 <!

    1.5K30

    Angular JS + Express JS入门搭建网站

    Angular JS   Angular JS是由谷歌员工开发,后由谷歌维护的一个项目,官网为:https://angularjs.org/。...Angular JS的产生为了解决静态网页操作DOM的弊端,适用于开发动态Web应用。   Angular JS的原理可通过下图了解:   网上入门学习的资料也很多,这里不予赘述。...JS控制编写的页面,指定Angular JS的app为myApp,注意看其中的表达式,{{name}},name就是一个动态变量。...那有一个问题,indexContrl如何与index.html关联起来?Angular JS怎么知道我们要用indexContrl来控制index.html?   ...路径如下:   其中public文件夹中放置的是UI相关文件,如下:   其中app.js是Express JS的起始文件,相当于main函数。

    4.4K60

    Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps详解

    例如,如果你有以下内容: https://static1.example.com/js/app.js https://static2.example.com/js/app.js 您可以使用 ~/js/app.js...~前缀告诉 Sentry,对于给定的 URL,任何 路径为 /js/app.js 的协议和主机名的组合都应该使用这个工件(artifact)。...Verify your source files are not too large 对于单个 artifact,Sentry 接受的最大文件大小为 40 MB。...为了使 Sentry 缩小堆栈跟踪的大小,必须同时提供缩小的文件(例如app.min.js)和相应的源映射。如果源映射文件不包含原始源代码(sourcesContent),则还必须提供原始源文件。...web 应用程序可以从多个来源访问并不少见。请参阅我们关于如何处理此问题的多个来源的文档。

    1.3K30

    webpack提升构建速度

    把 loader 应用的文件范围缩小我们在使用 loader 的时候,尽可能把 loader 应用的文件范围缩小,只在最少数必须的代码模块中去使用必要的 loader,例如 node_modules 目录下的其他依赖类库文件...vendor.js 和 manifest.json,然后再进行应用代码的构建。...你会发现构建结果的应用代码中不包含 react 和 react-dom 的代码内容,这一部分代码内容会放在 vendor.js 这个文件中,而你的应用要正常使用的话,需要在 HTML 文件中按顺序引用这两个代码文件...,但是有个区别,DLLPlugin 构建出来的内容无需每次都重新构建,后续应用代码部分变更时,你不用再执行配置为 webpack.dll.config.js 这一部分的构建,沿用原本的构建结果即可,所以相比...总结本文我们首先介绍了如何从多个配置优化的方式来提高 webpack 的构建速度:减少 resolve 的解析把 loader 应用的文件范围缩小减少 plugin 的消耗选择合适的 devtool在必要的时候

    556180

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

    network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大 ?...根据以上三点,具体优化步骤如下 : #2.1 登录页面(打开网站的第一个页面)图片 主要的处理方式就是减小图片的大小 我这里直接把登录页面的背景图片全部去掉,这样子直接可以省很多时间 #2.2 Router...引入外部CDN,就是说,不需要npm下载对应的库,从而减小vendor.js的体积,但是又不会影响库的正常使用,因为这些库放到CDN上之后,下载速度非常快,而且是并行的下载,下面就说说如何引入外部CDN...如何启用也很简单: 首先,在 config 中将 build.productionGzip 设置为 true 然后,确认 webpack.prod.conf.js 中有如下代码(默认是有的,没有的手动添加...如果没有的话,你只要把上面代码复制到 webpack 配置文件的 plugins 下即可。 如何方面查看build之后的文件大小呢?

    1.8K30

    谈谈webpack2的一些事

    [production][https://webpack.js.org/guides/production/] 1.2 通过promise方式导出配置文件 这种方式的应用场景是在某些情况下,我们暂时拿不到配置文件所需要的配置参数...大意就是新的命名更容易理解(反正对于我来说就是换了个英文单词:-D),同时还会兼容老的方式,也就是说,你照样写module.loaders还是可以的。...version=1ef4a2 关于怎么部署前端代码,可以查看大公司怎样开发和部署前端代码 webpack为我们提供了更简单的方式,为每个文件生成唯一的哈希值。...为了找到对应的入口文件对应的版本号,我们需要获取统计信息,例如这样的: { "main.js": "main.facdf96690cca2fec8d1.js", "vendor.js": "vendor.f4ba2179a28531d3cec5.../app.js'), vendor : path.resolve(__dirname, 'js/vendor.js') }, output : { path

    1.3K50

    「uniapp 如何支持微信小程序环境开发」初探uniapp为此做了哪些努力?

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/...其他的一些应用配置文件(app.json等)还是保留着在(为了简化整体构建过程而做的努力)。...3. app.js和app.wxss来自哪❓,common/main.js,runime.js,vendor.js又是什么❓ uniapp底层是基于webpack进行构建的,我们只需要在调用webpack.../runtime.js和common/vendor.js的来源了。...支持微信小程序WXS特性 还有很多和静态资源以及样式相关的rules,显然对于整体的构建流程没什么用,必须忽略啊。

    1.2K40
    领券