之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化。

首先想到的是对页面的js和css进行压缩优化,百度了下vs集成的插件,貌似没有很好的支持,自己在vs里找了一个非常满意的插件——Bundler & Minifier

这个vs插件下载地址:点我

插件功能说明:

1.合并多个css,js,html文件为一个单独的文件

2.保存源文件自动重新组合。

3.压缩css,js,html文件

等等。。。(其他我没用到,就不写了,可以看插件的英文说明)

使用方法:

比如我本地有两个js文件,我选择这两个js文件,右键,会看到该菜单——Bundle and Minify Files(合并并且压缩文件)

然后选择保存的新文件的名字(我本地文件叫:newtask.js),即可自动把两个js合并成一个js并生成压缩文件。

通过该插件的压缩,我把页面的js全部替换成压缩后的min.js以后,页面加载的时间从原来的6s,减少到2秒。效果还是比较明显的。

如有不对的地方请多多提意见,谢谢!^_^

vs合并压缩css,js插件——Bundler & Minifier的更多相关文章

  1. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  2. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  3. uglifyjs 合并压缩 js, clean-css 合并压缩css

    本文主要介绍如何通过CLI命令行(也就是终端或者cmd打开的那个shell窗口)实现 js和 css 的合并压缩. uglifyjs 合并压缩 js: 1.安装node 这一步就不多说了,下载node ...

  4. asp.net mvc项目实记-开启伪静态-Bundle压缩css,js

    百度这些东西,还是会浪费了一些不必要的时间,记录记录以备后续 一.开启伪静态 如果不在web.config中配置管道开关则伪静态无效 首先在RouteConfig.cs中中注册路由 routes.Ma ...

  5. ASP.NET MVC Bundles 合并压缩(js css)

    Chrome浏览器有并发的Http请求限制,Bundles可以将多个JS文件合并成一个文件并进行压缩,最终得到一个单文件的压缩包. 第一步:BundleConfig public class Bund ...

  6. 使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( ...

  7. JAVA使用YUI压缩CSS/JS

    前言 JS/CSS文件压缩我们经常会用到,可以在网上找在线压缩或者本地直接使用,我这里使用的是yahoo开源组件YUI Compressor.首先介绍一下YUI Compressor,它是一个用来压缩 ...

  8. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  9. Sublime Text2格式化HMTL/CSS/JS插件HTML-CSS-JS Prettify

    之前格式化用过JSFormat,今天在GitHub发现了一个比较好的插件HTML-CSS-JS Prettify,具体的地址https://github.com/victorporof/Sublime ...

随机推荐

  1. C#多种方式获取文件路径

    string str5=Application.StartupPath;//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str1 =Process.GetCurren ...

  2. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  3. .NET Core 调用WCF 服务

    .NET Core 和ASP.NET Core 已经可以调用WCF 服务. 环境要求: VS2015 Update 2 +VS2015 Tooling + .NET Core SDK 下载地址: ht ...

  4. 【UWP】不通过异常判断文件是否存在

    从WP升到WinRT(Win8/WP8.1/UWP)后所有的文件操作都变成StorageFile和StorageFolder的方式,但是微软并没有提供判断文件是否存在的方法通常的做法我们可以通过下面方 ...

  5. 关于ExtJs4的Grid带 查询 参数 分页(baseParams-->extraParams)

    (园里很多文章,美名其曰 :ExtJs GridPanel+查询条件+分页.  但是加查询条件后点击下一页,查询条件失效,求你们自己测试明白再显摆 不要误导我这种新人.) ExtJs6发布了,ExtJ ...

  6. Chrome的ERR_UNSAFE_PORT解决办法

    今天早上来上班照往常一样,打开我的VS,编译运行程序,打不开??又是一阵调试,断点,很快我发现不是我的程序问题,因为在IE,Firefox里都可以正常打开,唯独Chrome报错.又仔细看了下报错页面, ...

  7. Android录音应用

    首先是xml布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm ...

  8. hibernate 注释说明

    * @Entity -- 将一个类声明为一个实体 bean(即一个持久化 POJO 类) * @Id -- 注解声明了该实体 bean 的标识属性(对应表中的主 键). * @Table -- 注解声 ...

  9. 修复 XE7 update1 发布 iOS 8.x 实机问题

      1. 开启工程目录下面的 Entitlement.TemplateiOS.xml 档案. 2. 加入二行: <key>application-identifier</key> ...

  10. 基于Erlang VM的函数式编程语言Elixir

    Elixir官网:http://elixir-lang.org/ Elixir是一种函数式动态语言,用于构建可伸缩.易维护的应用程序. Elixir是基于Erlang VM的,其广为人知的特点是运行低 ...