รวมและลดขนาดไฟล์ CSS / JS หลายไฟล์

ฉันกำลังพยายามเพิ่มประสิทธิภาพไซต์โดยการรวมและบีบอัดไฟล์ 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="https://stackoverflow.com/css/main.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="https://stackoverflow.com/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>

สำหรับการเปิดตัวการผลิต, ฉันต้องการที่จะรวมไฟล์ CSS 3 เข้าเป็นหนึ่งเดียวและลดขนาดโดยใช้เช่นยูอิคอมเพรสเซอร์ แต่ฉันต้องอัปเดตหน้าทั้งหมดที่ต้องการไฟล์ 3 ไฟล์นี้เพื่ออ้างอิงถึง CSS ที่ย่อขนาดใหม่ ดูเหมือนว่าจะเกิดข้อผิดพลาดได้ง่าย (เช่นคุณกำลังลบและเพิ่มบางบรรทัดในไฟล์จำนวนมาก) แนวทางอื่นที่มีความเสี่ยงน้อยกว่านี้หรือไม่? ปัญหาเดียวกันสำหรับไฟล์ JS

ลองใช้minify - มันช่วยให้คุณรวมไฟล์ js, css หลาย ๆ ไฟล์ไว้ในไฟล์เดียวเพียงแค่ซ้อนมันลงใน url เช่น

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

เราใช้มันมาหลายปีแล้วและทำได้ดีมากและทำได้ทันที (ไม่จำเป็นต้องแก้ไขไฟล์)

ฉันคิดว่าYUI Compressorดีที่สุดที่มี ลดขนาด JS และ CSS และยังตัดconsole.logคำสั่งเหล่านั้นที่ผู้คนใช้สำหรับการดีบัก JavaScript ระดับต่ำ

ตรวจสอบวิธีที่ง่ายก็คือ

คุณสามารถเริ่มต้นในภารกิจมดและรวมไว้ในตะขอโพสต์ / พรีคอมมิตของคุณหากคุณใช้ svn / git

อัพเดท:ทุกวันนี้ฉันใช้คำรามกับ concat, minify & uglify มีส่วนร่วม คุณสามารถใช้กับผู้เฝ้าดูเพื่อสร้างไฟล์ที่ย่อขนาดใหม่ในพื้นหลังเมื่อใดก็ตามที่คุณเปลี่ยนแหล่งที่มา uglify มีส่วนร่วมไม่เพียง แต่ดึงบันทึกคอนโซลเท่านั้น แต่ยังดึงฟังก์ชันและคุณสมบัติที่ไม่ได้ใช้ออกไปด้วย

ดูบทแนะนำนี้สำหรับข้อมูลเชิงลึกสั้น ๆ

อัปเดต: ปัจจุบันผู้คนถอยห่างจาก "อึก" รุ่นก่อนและใช้ npm เป็นเครื่องมือสร้าง อ่านข้อมูลเกี่ยวกับมันนี่

UPDATE: ตอนนี้ผู้คนใช้เส้นด้ายเพื่อเรียกใช้ npm ไม่น่าแปลกใจ; ไอคอนเส้นด้ายเป็นแมว เฟรมเวิร์กปัจจุบันส่วนใหญ่ใช้webpackเพื่อรวมทรัพยากรไว้ในแพ็คเกจซึ่งจะดูแลการลดขนาดด้วย

ฉันต้องอัปเดตเพจทั้งหมดที่ต้องการทั้ง 3 ไฟล์เพื่ออ้างอิงถึง CSS ที่เพิ่งย่อขนาด

ประการแรกฉันจะบอกว่าคุณควรมีส่วนหัวทั่วไป ดังนั้นจึงไม่จำเป็นต้องเปลี่ยนส่วนหัวทั้งหมดตลอดเวลาเมื่อจำเป็น ควรมีส่วนหัวเดียวหรือ 2-3 ดังนั้นตามที่เพจของคุณต้องการคุณสามารถเปลี่ยนส่วนหัวของคุณได้ ดังนั้นเมื่อใดก็ตามที่คุณต้องการขยายเว็บแอปของคุณจะมีความเสี่ยงและน่าเบื่อน้อยลง

คุณไม่ได้กล่าวถึงสภาพแวดล้อมการพัฒนาของคุณ คุณจะเห็นว่ามีเครื่องมือบีบอัดจำนวนมากที่แสดงรายการสำหรับสภาพแวดล้อมต่างๆต่างๆ และคุณกำลังใช้เครื่องมือที่ดี ieYUI Compressor

ฉันลงเอยด้วยการใช้CodeKitเพื่อเชื่อมไฟล์ CSS และ JS ของฉันเข้าด้วยกัน คุณลักษณะที่ฉันพบว่ามีประโยชน์มากคือความสามารถในการเชื่อมต่อเมื่อบันทึกไฟล์ เนื่องจากตรวจสอบเนื้อหา CSS / JS ที่เกี่ยวข้อง เมื่อฉันรวมเข้าด้วยกันอย่างถูกต้องเช่น 1 ไฟล์ CSS และ 1 JS ไฟล์อื่น ๆ ทั้งหมดก็สามารถอ้างถึง 2 ไฟล์นี้ได้

คุณสามารถขอให้ CodeKit ทำการย่อ / บีบอัดได้ทันที

ข้อจำกัดความรับผิดชอบ: ฉันไม่มีส่วนเกี่ยวข้องกับ CodeKit แต่อย่างใด ฉันสุ่มพบมันบนเว็บและเป็นเครื่องมือที่ยอดเยี่ยมในกระบวนการพัฒนาของฉัน นอกจากนี้ยังมาพร้อมกับการอัปเดตที่ดีตั้งแต่ฉันใช้งานครั้งแรกเมื่อปีกว่า

เคล็ดลับง่ายๆสำหรับผู้ใช้ windows หากคุณต้องการเพียงต่อไฟล์:

เปิด cmd ในตำแหน่งที่ต้องการและเพียงแค่ไพพ์ไฟล์ของคุณไปยังไฟล์โดยใช้ " type "

เช่น:

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

หากคำสั่งของสคริปต์ของคุณเป็นสิ่งสำคัญที่คุณต้องชัดเจนพิมพ์ไฟล์ในการสั่งซื้อที่ต้องการ

ฉันใช้สิ่งนี้ในไฟล์ bat สำหรับโครงการเชิงมุม / bootstrap ของฉัน

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

มันเป็นปี 2015 ในถนนและวิธีที่ง่ายที่สุดคือการใช้ IMO อึก - http://gulpjs.com/ การย่อโค้ดโดยใช้gulp-uglifyสำหรับสคริปต์ js และgulp-minify-cssสำหรับ css นั้นง่ายมาก อึกคุ้มค่าที่จะลอง

ฉันไม่เห็นว่าคุณพูดถึงระบบจัดการเนื้อหา (Wordpress, Joomla, Drupal ฯลฯ ) แต่ถ้าคุณใช้ CMS ยอดนิยมพวกเขาทั้งหมดมีปลั๊กอิน / โมดูล (ตัวเลือกฟรีเช่นกัน) ที่จะลดขนาดและแคช css และ js ของคุณ

การใช้ปลั๊กอินช่วยให้คุณสามารถเก็บเวอร์ชันที่ไม่มีการบีบอัดไว้สำหรับแก้ไขได้จากนั้นเมื่อมีการเปลี่ยนแปลงปลั๊กอินจะรวมการเปลี่ยนแปลงของคุณโดยอัตโนมัติและบีบอัดไฟล์อีกครั้ง เพียงตรวจสอบให้แน่ใจว่าคุณได้เลือกปลั๊กอินที่จะช่วยให้คุณสามารถยกเว้นไฟล์ (เช่นไฟล์ js ที่กำหนดเอง) ในกรณีที่ไฟล์เสียหาย

ที่ผ่านมาฉันได้พยายามเก็บไฟล์เหล่านี้ด้วยตนเองและมักจะกลายเป็นฝันร้ายในการซ่อมบำรุง ขอให้โชคดีหวังว่านี่จะช่วยได้

สำหรับผู้ที่ต้องการบางสิ่งบางอย่างที่เบาและยืดหยุ่นกว่านี้ฉันสร้างjs.shในวันนี้เพื่อแก้ไขปัญหานี้ เป็นเครื่องมือบรรทัดคำสั่งง่ายๆที่กำหนดเป้าหมายไปยังไฟล์ JS ที่สามารถแก้ไขได้อย่างง่ายดายเพื่อดูแลไฟล์ CSS ด้วย สิทธิประโยชน์:

• กำหนดค่าได้อย่างง่ายดายสำหรับนักพัฒนาหลายคนในโครงการ
• รวมไฟล์ JS ตามลำดับที่ระบุใน script_order.txt
• บีบอัดไฟล์ด้วย Closure Compiler ของ Google
• แยก JS ออกเป็นชิ้นส่วน <25kb หากเป็นไปได้เนื่องจาก iPhone จะไม่แคชสิ่งที่มากกว่า 25kb
• สร้างไฟล์ PHP ขนาดเล็กพร้อม<script>แท็กที่คุณสามารถใส่ได้ตามความเหมาะสม
• การใช้งาน: js.sh -u yourname

สามารถใช้การปรับปรุงบางอย่างได้ แต่จะดีกว่าสำหรับกรณีการใช้งานของฉันมากกว่าโซลูชันอื่น ๆ ทั้งหมดที่ฉันเคยเห็นมา

ขั้นตอนแรกของการเพิ่มประสิทธิภาพคือการย่อขนาดไฟล์ (ฉันขอแนะนำGULPสำหรับการย่อขนาดและการเพิ่มประสิทธิภาพโซลูชันนาฬิกาที่เรียบง่ายการติดตั้งและไฟล์ทั้งหมดจะถูกบีบอัดพร้อมกันรองรับ CSS, JS, less, sass และอื่น ๆ ทั้งหมด ... )

หรือโซลูชันโรงเรียนเก่า:

1) โดยทั่วไปเป็นกระบวนการของการเพิ่มประสิทธิภาพเพื่อเพิ่มประสิทธิภาพเว็บไซต์พยายามผสาน CSS ทั้งหมดในหนึ่งไฟล์และไฟล์บีบอัดโดยใช้เข็มทิศ ด้วยวิธีนี้จะมีการแทนที่คำขอหลายรายการไปยัง CSS แบบคงที่

2) ปัญหาของ JS หลายตัวที่คุณสามารถแก้ไขได้โดยใช้ CDN (หรือ Google Hosted Libraries) ดังนั้นคำขอจึงไปที่เซิร์ฟเวอร์อื่นที่ไม่ใช่ของคุณ ด้วยวิธีนี้เซิร์ฟเวอร์ไม่รอให้คำขอก่อนหน้านี้เสร็จสมบูรณ์ก่อนที่จะส่งต่อไป

3) หากคุณมี JavaScript ที่จัดเก็บไว้ในเครื่องของคุณเองให้ย่อขนาดไฟล์แต่ละไฟล์โดยใช้ปลั๊กอินBrackets "บีบอัด JavaScript" เพียงคลิกเดียวเพื่อบีบอัด JavsScript Bracketsเป็นโปรแกรมแก้ไขฟรีสำหรับ CSS และ JS แต่สามารถใช้กับ PHP และภาษาอื่น ๆ ได้ มีปลั๊กอินมากมายให้เลือกสำหรับนักพัฒนาทั้งส่วนหน้าและส่วนหลัง โดยทั่วไป "คลิกเดียว" เพื่อทำคำสั่งเหล่านี้ทั้งหมด (จนถึงหลายรายการ) Btw วงเล็บมาแทนที่ Dreamweaver ที่แพงมากของฉัน;)

3) ลองใช้เครื่องมือเช่น Sass , Compass, น้อยลงเพื่อย่อขนาด CSS ของคุณ

หมายเหตุ: แม้ไม่ได้ใช้ การผสมSASSหรือตัวแปร CSS ของคุณก็จะถูกบีบอัด (เพียงแค่ใช้ CSS บริสุทธิ์และคำสั่ง "watch" ของเข็มทิศก็จะบีบอัดให้คุณ)

ฉันหวังว่านี่จะช่วยได้!

หากคุณกำลังทำการประมวลผลล่วงหน้ากับไฟล์ที่คุณให้บริการคุณอาจต้องการตั้งค่าระบบการสร้างที่เหมาะสม (เช่น Makefile) ด้วยวิธีนี้คุณจะมีไฟล์ต้นฉบับบางไฟล์ที่ไม่มีการทำซ้ำและเมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงคุณจะเรียกใช้ 'make' และจะทำให้ไฟล์ที่สร้างโดยอัตโนมัติทั้งหมดเป็นปัจจุบัน หากมีระบบบิลด์อยู่แล้วให้เรียนรู้วิธีการทำงานและใช้งาน ถ้าไม่คุณจะต้องเพิ่ม

ก่อนอื่นให้หาวิธีรวมและย่อขนาดไฟล์ของคุณจากบรรทัดคำสั่ง (เอกสาร YUICompressor ครอบคลุมสิ่งนี้) กำหนดไดเร็กทอรีสำหรับสิ่งที่สร้างขึ้นโดยอัตโนมัติแยกจากสิ่งที่คุณทำงาน แต่สามารถเข้าถึงได้จากเว็บเซิร์ฟเวอร์และส่งออกไปที่นั่นเช่น gen / scripts / รวม js ใส่คำสั่งที่คุณใช้ลงใน Makefile และเรียกใช้ 'make' ใหม่ทุกครั้งที่คุณทำการเปลี่ยนแปลงและต้องการให้มีผล จากนั้นอัปเดตส่วนหัวในไฟล์อื่นให้ชี้ไปที่ไฟล์ที่รวมและย่อขนาด

ในโครงการ symfony ของฉันฉันทำอะไรแบบนี้

{# 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 %}

เมื่อเวอร์ชัน dev พร้อมสำหรับการผลิตฉันใช้สคริปต์นี้เพื่อรวมไฟล์ css ทั้งหมดและแทนที่เนื้อหาของmin.css.

แต่วิธีนี้จะใช้ได้ก็ต่อเมื่อมีไฟล์ css เดียวกันรวมอยู่ในทุกเพจ

คุณสามารถใช้โมดูลโหนดcssminซึ่งสร้างขึ้นจากคอมเพรสเซอร์ YUI ที่มีชื่อเสียง

$ 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);