여러 CSS / JS 파일 결합 및 축소

93

CSS 및 JS 파일을 통합하고 압축하여 사이트 성능을 최적화하려고합니다. 내 질문은 내가 직면 한 실제 상황을 감안할 때 이것을 달성하는 방법에 대한 (구체적인) 단계에 관한 것입니다 (하지만 다른 개발자들 사이에서도 일반적이어야 함).

내 페이지는 다음과 같은 여러 CSS 및 JS 파일을 참조합니다.

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

프로덕션 릴리스의 경우 3 개의 CSS 파일을 하나로 결합하고 예를 들어 YUI Compressor를 사용하여 축소하고 싶습니다 . 하지만 새로 축소 된 CSS를 참조하기 위해이 3 개의 파일이 필요한 모든 페이지를 업데이트해야합니다. 오류가 발생하기 쉬운 것 같습니다 (예 : 많은 파일에서 일부 줄을 제거하고 추가하는 경우). 덜 위험한 다른 접근 방식이 있습니까? JS 파일에 대해서도 동일한 문제입니다.

javascript  css  optimization  yui-compressor  http-compression 
— Moey
소스
1
나는 그들이 새로운 asp.net 4.5 항목에 이와 같은 것을 도입하여 '디버그'에서 스크립트가 개별적으로 렌더링되고 축소되지 않았지만 '릴리즈'에서는 결합 및 축소되도록하고 싶습니다.
— Daniel Powell

답변:

36

minify를 확인하십시오 -여러 js, css 파일을 URL에 쌓기 만하면 하나로 결합 할 수 있습니다.

<script src="/scripts/js/main.js,/scripts/js/adapter/adapter.js"></script>

우리는 수년 동안 그것을 사용해 왔으며 훌륭한 작업을 수행하고 즉시 수행합니다 (파일을 편집 할 필요 없음).

— 국수
소스
2
안녕하세요 국수, 그게 나를 위해 작동하지 않습니다. 해당 스크립트 src에 대해 404를 제공합니다. 내가 사용 - <스크립트 SRC = " test.com/script1.js,http://test.com/script2.js"></... > 로딩 오류를주는 모든 JS 파일
— Heemanshu Bhalla
26

YUI Compressor 가 최고 라고 생각합니다 . JS와 CSS를 축소하고 console.log사람들이 저수준 JavaScript 디버깅에 사용 하는 문을 제거합니다 .

그것이 얼마나 쉬운 지 확인하십시오 .

ant 작업에서 시작할 수 있으므로 svn / git을 사용하는 경우 post / pre-commit 후크에 포함시킬 수 있습니다.

업데이트 : 요즘 나는 concat, minify & uglify 기여와 함께 grunt를 사용합니다. 감시자와 함께 사용할 수 있으므로 소스를 변경할 때마다 백그라운드에서 새로운 축소 된 파일을 생성합니다. uglify contrib는 콘솔 로그를 제거 할뿐만 아니라 사용하지 않는 기능과 속성도 제거합니다.

간략한 정보는 이 튜토리얼 을 참조하십시오 .

업데이트 : 요즘 사람들은 grunt와 그 전임자 "gulp"에서 물러나서 npm을 빌드 도구로 사용합니다. 여기 에서 읽어보십시오 .

업데이트 : 이제 사람들은 npm을 실행 하기 위해 yarn 을 사용 합니다. 당연합니다. 원사 아이콘은 고양이입니다. 대부분의 현재 프레임 워크는 웹팩 을 사용 하여 리소스를 패키지로 묶은 다음 축소도 처리 합니다.

— Andresch Serj
소스
위 링크 에서 현재 YUI Compressor의 기능이지만 CSS 파일 최소화를 지원하지 않습니다.
— Songo 2013-08-28
YUI Compressor 웹 사이트에서 "YUI Compressor는 또한 Isaac Schlueter의 정규 표현식 기반 CSS minifier의 포트를 사용하여 CSS 파일을 압축 할 수 있습니다."라고 적혀 있습니다. 또한 : yui.github.io/yuicompressor/css.html
— Andresch Serj
3
워크 플로우 솔루션의 위대한 역사, 다음 업데이트를 기대하십시오!
— gdbj
3
모든 업데이트 ? 요즘 사람들은 무엇을합니까?
— Xsmael 19
2
@Xsmael : 나는에 대한 최신 업데이트 추가
— Andresch Serj을
19

새로 축소 된 CSS를 참조하기 위해이 3 개의 파일이 필요한 모든 페이지를 업데이트해야합니다.

먼저 공통 헤더가 있어야한다고 말하고 싶습니다. 따라서 필요할 때마다 항상 모든 헤더를 변경할 필요는 없습니다. 단일 헤더 또는 2-3 개를 사용하는 것이 좋습니다. 따라서 페이지가 필요하면 헤더를 변경할 수 있습니다. 따라서 웹 앱을 확장하고 싶을 때마다 덜 위험하고 지루할 것입니다.

개발 환경에 대해 언급하지 않았습니다. 다양한 환경에 대해 나열된 많은 압축 도구 가 있음을 알 수 있습니다 . 그리고 당신은 좋은 도구 ieYUI Compressor를 사용하고 있습니다.

— Somnath Muluk
소스
12

결국 CodeKit 을 사용하여 CSS와 JS 파일을 연결했습니다. 정말 유용하다고 생각되는 기능은 파일 저장시 연결을 수행하는 기능입니다. 각 CSS / JS 자산을 모니터링하기 때문입니다. 예를 들어 CSS 1 개와 JS 파일 1 개를 적절히 결합하면 다른 모든 파일은이 2 개를 참조 할 수 있습니다.

CodeKit에게 즉석 축소 / 압축을 요청할 수도 있습니다.

면책 조항 : 저는 어떤 식 으로든 CodeKit과 제휴하지 않습니다. 나는 그것을 웹에서 무작위로 찾았고 개발 과정에서 훌륭한 도구로 사용되었습니다. 1 년 이상 전에 처음 사용했기 때문에 좋은 업데이트도 함께 제공됩니다.

— Moey
소스
2
이것은 Mac 용입니다 ... wht abt windows ??
— Gaurav 가르 왈
나는 CodeKit을 사용하고 그것을 좋아합니다 ... git을 사용하여 새 브랜치에 대한 프로젝트를 체크 아웃하면 내 js 연결이 죽습니다. npm 사용을 시작합니다.
— gdbj
12

파일을 연결하려는 경우 Windows 사용자를위한 빠른 팁 :

원하는 위치에서 cmd를 열고 " type "을 사용하여 파일을 파일로 파이프하십시오.

전의:

type .\scripts\*.js >> .\combined.js

스크립트의 순서가 중요한 경우 원하는 순서로 파일을 명시 적으로 입력해야합니다 .

내 각도 / 부트 스트랩 프로젝트를 위해 박쥐 파일에서 이것을 사용 합니다 .

del combos.js

type .\lib\jquery.min.js >> .\combos.js
type .\lib\bootstrap.min.js >> .\combos.js
type .\lib\Angular\angular.min.js >> .\combos.js
type .\lib\Angular\angular-route.min.js >> .\combos.js
type .\lib\Angular\angular-sanitize.min.js >> .\combos.js

type .\app.js >> .\combos.js
type .\services\*.js >> .\combos.js
type .\controllers\*.js >> .\combos.js
— mpx
소스
다른 언어를 모두 사용하더라도 완벽하게 작동하는 가장 간단한 방법 / 개념입니다. 내 생각은 이제 그것을 일종의 캐시 파일로 바꾸고 페이지를 호출하는 것입니다. 감사.
— jacktrader
10

2015 년은 거리에서 imo가 gulp를 사용하는 가장 쉬운 방법 인 http://gulpjs.com/ 입니다. js 스크립트에 gulp-uglify 를 사용하고 css 에 gulp-minify -css 를 사용하여 코드를 축소하는 것은 매우 간단합니다. Gulp 는 확실히 시도 할 가치가 있습니다.

— 이골 코텍
소스
6

콘텐츠 관리 시스템 (Wordpress, Joomla, Drupal 등)에 대해 언급하지는 않았지만 인기있는 CMS를 사용하는 경우 모두 CSS와 js를 축소하고 캐시 할 수있는 플러그인 / 모듈 (무료 옵션도 포함)이 있습니다.

플러그인을 사용하면 압축되지 않은 버전을 편집 할 수 있도록 유지 한 다음 변경 사항이있을 때 플러그인이 자동으로 변경 사항을 포함하고 파일을 다시 압축 할 수 있습니다. 파일이 손상 될 경우 파일 (예 : 사용자 지정 js 파일)을 제외 할 수있는 플러그인을 선택했는지 확인하십시오.

나는 과거에 이러한 파일을 수동으로 유지하려고 시도했지만 항상 유지 관리의 악몽으로 바뀝니다. 행운을 빕니다. 도움이 되었기를 바랍니다.

— RachelD
소스
6

좀 더 가볍고 유연한 것을 원하는 사람들을 위해 오늘이 문제를 해결하기 위해 js.sh를 만들었습니다 . CSS 파일을 관리하기 위해 쉽게 수정할 수있는 JS 파일을 대상으로하는 간단한 명령 줄 도구입니다. 혜택:

  • 한 프로젝트에서 여러 개발자가 사용하도록 쉽게 구성 가능
  • script_order.txt에 지정된 순서대로 JS 파일을 결합합니다.
  • Google의 Closure Compiler로 압축합니다.
  • iPhone은 25kb보다 큰 것을 캐시하지 않기 때문에 가능한 경우 JS를 <25kb 청크로 분할합니다.
  • <script>적절한 곳에 포함 할 수 있는 태그가 있는 작은 PHP 파일을 생성합니다.
  • 용법: js.sh -u yourname

몇 가지 개선 사항을 사용할 수 있지만 지금까지 본 다른 모든 솔루션보다 내 사용 사례에 더 좋습니다.

— 벤 Y
소스
4

최적화의 첫 번째 단계는 파일 최소화입니다. ( 최소화 및 최적화를 위해 GULP 를 강력히 권장 합니다. 간단한 watch 솔루션, 설치 및 모든 파일이 한 번에 압축됩니다. 모든 CSS, JS, less, sass 등 지원 ...)

또는 구식 솔루션 :

1) 일반적으로 최적화 과정으로 사이트 성능을 최적화하기 위해 모든 CSS를 하나의 파일에 병합하고 Compass 를 사용하여 파일을 압축합니다 . 이렇게하면 정적 CSS에 대한 여러 요청이 단일 CSS로 대체됩니다.

2) 여러 JS 문제를 CDN (또는 Google Hosted Libraries)을 사용하여 해결할 수 있으므로 요청이 귀하가 아닌 다른 서버로 이동합니다. 이렇게하면 서버는 다음을 보내기 전에 이전 요청이 완료 될 때까지 기다리지 않습니다.

3) 로컬에 저장된 JavaScript가있는 경우 Brackets 플러그인 "Compress JavaScript"를 사용하여 각 파일을 최소화합니다 . 기본적으로 JavsScript를 압축하는 것은 한 번의 클릭입니다. Brackets 는 CSS 및 JS 용으로 제작 된 무료 편집기이지만 PHP 및 기타 언어에 사용할 수 있습니다. 프런트 엔드 및 백 엔드 개발자 모두를 위해 선택할 수있는 많은 플러그인이 있습니다. 일반적으로 이러한 모든 (지금까지 여러 번) 명령을 수행하려면 "한 번 클릭"합니다. Btw, 브래킷은 내 매우 비싼 Dreamweaver를 대체했습니다.)

3) CSS를 최소화하기 위해 Sass , Compass, less 와 같은 도구를 사용해보십시오 .

참고 : SASS 믹싱 또는 변수 를 사용하지 않아도 CSS가 압축됩니다 (순수 CSS를 사용하면 Compass "watch"명령이 자동으로 압축됩니다).

이게 도움이 되길 바란다!

— StefaDesign
소스
3

제공하는 파일에 대해 사전 처리를하는 경우 적절한 빌드 시스템 (예 : Makefile)을 설정하고 싶을 것입니다. 이렇게하면 복제가없는 소스 파일이 있고 변경할 때마다 'make'를 실행하면 자동 생성 된 모든 파일이 최신 상태로 유지됩니다. 이미 빌드 시스템이있는 경우 작동 방식을 알아보고 사용하십시오. 그렇지 않은 경우 하나를 추가해야합니다.

따라서 먼저 명령 줄에서 파일을 결합하고 축소하는 방법을 알아 봅니다 (YUICompressor 문서에서 이에 대해 다룹니다). 작업하지만 웹 서버에 액세스 할 수있는 항목과는 별도로 자동 생성 된 항목에 대한 디렉토리를 지정하고 여기에 출력합니다 (예 : gen / scripts / combined.js). 사용한 명령을 Makefile에 넣고 변경하고 적용하기를 원할 때마다 'make'를 다시 실행하십시오. 그런 다음 결합 및 축소 된 파일을 가리 키도록 다른 파일의 헤더를 업데이트합니다.

— 짐란 돔
소스
1

심포니 프로젝트에서 다음과 같이합니다.

{# layout.html.twig #}

{% block styles %}
    {% if app.environment == 'prod' %}
        <link href="{{ asset('bundles/appmain/min.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
        <link href="{{ asset('bundles/appmain/hello.css') }}" rel="stylesheet" type="text/css" />
        <link href="{{ asset('bundles/appmain/world.css') }}" rel="stylesheet" type="text/css" />
    {% endif %}
{% endblock %}
{# some-view.html.twig #}

{% extends 'AppMainBundle::layout.html.twig' %}

{% block styles %}
    {{ parent() }}

    {% if app.environment != 'prod' %}
        <link href="{{ asset('bundles/appsecond/styles.css') }}" rel="stylesheet" type="text/css" />
    {% else %}
{% endblock %}

개발 버전이 프로덕션 준비가되면 이 스크립트 를 사용하여 모든 CSS 파일을 결합하고 min.css.

그러나이 솔루션은 모든 페이지에 동일한 CSS 파일이 포함 된 경우에만 작동합니다.

— 몰드 크래프트
소스
1

유명한 YUI 압축기에서 빌드 된 cssmin 노드 모듈을 사용할 수 있습니다.

$ npm -g i cosmic # install

# Usage   
var puts = require('util').puts,
fs = require('fs'),
cssmin = require('./cssmin');
var css = fs.readFileSync("/Any/Random/CSS/File.css", encoding='utf8');
var min = cssmin(css);
puts(min);
— sdc
소스
-1

더 빠른 유틸리티는 모두 여기에서 찾을 수 있습니다. 

http://www.code-stuff.net
http://www.code-stuff.net/HttpUtility
http://www.code-stuff.net/HttpUtility/minifyCSS
http://www.code-stuff.net/HttpUtility/stringify_json
— SIbghat
소스
그것은이 사이트가 더 이상 사용할 보인다
— magikMaker
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.