关键词：
【中文标题】为生产优化 js - 大量小或一个大的 js 文件【英文标题】：Optimising js for production - Lots of small or one large js file 【发布时间】：2014-06-18 10:37:33 【问题描述】：我有一个 AngularJS 应用程序，我希望对其进行优化以提高速度。
我目前正在将我需要的所有 bower_components 丑化并连接到 vendor.js 文件中。
我目前正在丑化我所有的自定义 js 并将其连接到一个 scripts.js 文件中。
因此，当用户下载页面时，get 请求中的资源非常少。 （目前总共 6 个没有图像资源）。缺点是我有两个大型 js 文档要下载 - 总共大约半兆字节 - 在完成任何页面渲染之前需要下载整个文档。
我主要关心的是vendor.js 文件。是使用 cdn 提供的、缩小的 javascript 文件（总共大约 10 个）更好，还是使用我的连接和丑化的 vendor.js 更好？
前者意味着在没有图片资源的情况下总资源将增加到 16 个，但它们将由不同供应商提供的 CDN 网络提供服务，从而允许并行下载。
【问题讨论】：
与此类优化问题一样，您只能通过尝试并分析结果来发现。即使这样，网络延迟也可能难以获得一致的答案。 Should I copy all my JavaScript sources into one single file?的可能重复 【参考方案1】：尽管前者允许并行下载，但它是 16 个不同的 TCP 连接并嵌入了 HTTP，因此也发送了 16 个 HTTP 标头。 TCP 打开新连接的成本有点高。所以我认为将所有内容集中在一个文件中可能会更好。
无论如何，您可以做的是测试这两种情况并在您最喜欢的网络浏览器的网络开发人员工具中查看，平均而言，这是最快的方法。至少可以使用 Firefox。
【讨论】：
如何解决webpack打包后，dist文件过大的问题
去除不必要的插件刚开始用webpack的时候，开发环境和生产环境用的是同一个webpack配置文件，导致生产环境打包的JS文件包含了一大堆没必要的插件，比如HotModuleReplacementPlugin,NoErrorsPlugin...这时候不管用什么优化方式，都没多大效... 查看详情
如何从丑化/优化中排除某些 requireJS 文件
...建工作没有问题，我会得到一个大的js文件来将它部署到生产环境中。我遇到的问题是，我有一些外部框架（如angular 查看详情
laravel app.js 非常大的文件大小
...间】：2017-04-2912:29:12【问题描述】：我已经为Heroku部署了一个Laravel5.3应用程序。但是，在加载/login时，我注意到页面加载时间非常慢。问题似乎是一个非常大的app.js文件：/js/app.js。这是DevTools中网络资源面板的屏幕截图：screensh... 查看详情
vue项目的一些优化策略
Vue项目完成后就要从开发环境转成生产环境一些第三方的包体积过大，导致生成js文件过于庞大，这是时候可以生成打包报告来查看项目中的问题1.生成报告有两种方式，一种使用npmrunbuild--report2.另一种使用vue脚手架的ui可视化面... 查看详情
使用 r.js 来优化 require.js 文件
】使用r.js来优化require.js文件【英文标题】：user.jsinordertooptimizerequire.jsfiles【发布时间】：2013-03-2105:28:36【问题描述】：我正在编写jquery插件。由于插件包含大量代码，我决定将代码分成几个文件并使用require.js。我正在努力实现... 查看详情
Node.js：为 package.json 确定手动安装的模块和版本号
...【发布时间】：2015-10-1022:58:28【问题描述】：我即将为“生产模式”（MEAN环境，谈论服务器端）准备一个网络服务器，从而也为我的项目创建package.json文件。由于它现在使用大量文件和模 查看详情
如何将 p5.js 画布保存为非常大的 PNG？
...：我知道如何使用p5.js保存画布。但是我想将画布保存为一个非常大的png（例如8000x8000），以便我可以在Photoshop中使用它并将图像缩小到适当的大小。除了在幕后创建一个对于浏览器窗口来说太大的新画布之外，还有其他简单的... 查看详情
将一个大的 json 文件拆分为多个较小的文件
】将一个大的json文件拆分为多个较小的文件【英文标题】：Splitalargejsonfileintomultiplesmallerfiles【发布时间】：2017-08-2119:09:18【问题描述】：我有一个大的JSON文件，大约500万条记录和大约32GB的文件大小，我需要将其加载到我们的... 查看详情
如何通过node.js中的JSONStream模块解析一个大的、换行符分隔的JSON文件？
】如何通过node.js中的JSONStream模块解析一个大的、换行符分隔的JSON文件？【英文标题】：howtoparsealarge,Newline-delimitedJSONfilebyJSONStreammoduleinnode.js?【发布时间】：2013-02-1319:41:26【问题描述】：我有一个大的json文件，它是换行符分隔... 查看详情
webpack构建优化—dll
参考技术A首先要声明dll的配置文件webpack.dll.js，这个配置文件的作用就是将所有依赖包整合成一个文件，entry配置为venders:["vue","vuex","axios"]，它表示会将vue，vuex和axios这些依赖包整合成一个venders.js。用的是... 查看详情
vue.config.js中的webpack配置，优化及多页面应用开发
...我们打包后的css，js等存放的位置是否在保存的时候检查生产环境的sourcemap，可以将其设置为false以加速生产环境构建，默认值是true可通过devServer.proxy解决前后端跨域问题（反向代理）扩展：hot和hotOnly的区别是在某些模块不支持... 查看详情
39生产案例：基于延迟消息机制优化大量订单的定时退款扫描问题示例代码
一、基于延迟消息机制优化订单退款扫描问题1.订单退款扫描的问题之前写过一个电商小程序，在它的购物流程中，作为用户在小程序上都会先选择一些商品加入购物车，然后对购物车里选择的一些商品统一下一个订... 查看详情
vue项目打包优化及配置vue.config.js文件（实测有用）(代码片段)
...cdn加速可以去官网找到相应插件的路径BootCDN官网//是否为生产环境constisProduction=process.env.NODE_ENV!=='development';//本地环境是否需要使用cdnconstdevNeedCdn=false//cdn链接constcdn=//cdn：模块名称和模块作用域命名ÿ... 查看详情
在生产构建中更改 js 和 css 文件的文件路径
】在生产构建中更改js和css文件的文件路径【英文标题】：Changingfilepathofjsandcssfilesinproductionbuild【发布时间】：2019-02-1716:57:11【问题描述】：我需要一些帮助，或者至少需要指出正确的方向。我正在尝试使用VueCLI3部署一个vuejs应... 查看详情
require.ensure的用法;异步加载-代码分割;
...是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造scriptdom元素，由浏览器发起异步请求这个js文件。场景分析:比如应用的首页里面有个按钮，点击后可以打开某个地图... 查看详情
webpack 正在构建大量文件而不是一个
】webpack正在构建大量文件而不是一个【英文标题】：webpackisbuildingalotsoffilesinsteadofone【发布时间】：2022-01-2016:19:40【问题描述】：使用webpack将我的应用程序构建到./dist文件夹时，我得到了很多文件，而我希望只有一个。我的./dis... 查看详情
js40---享元模式
...个为了提高性能(空间复杂度)的设计模式*他使用与程序会生产大量的相类似的对象是耗用大量的内存的问题*/(function(){/***制造商*型号*拥有者*车牌号码*生产日期*/varCar=function(make,model,year,owner,tag,renewDate){this.make=make;this.model=model;th... 查看详情
如何在 vue.config.js 中为生产设置 API 路径？
】如何在vue.config.js中为生产设置API路径？【英文标题】：HowtosetAPIpathinvue.config.jsforproduction?【发布时间】：2018-12-2615:42:15【问题描述】：我正在使用vuecli3进行设置。我已经在vue.config.js文件中设置了devServerapi：devServer:proxy:\'/api\':... 查看详情