ปัญหาของคนใช้ npm ที่ต้องเจอแน่ๆ คือ ไฟล์ขยะ หรือไฟล์ที่เราไม่ได้ใช้ จำนวนมหาศาล ที่ไม่ควรไปนั่งเสียเวลานั่งลบมัน แต่ด้วยขนาด package ที่ใหญ่ เวลาเอางานขึ้น production นั้น ถ้าไม่ลง node ไว้บน server และ install ผ่าน CLI เราก็ต้องใช้วิธี FTP เข้าไปวาง
ซึ่ง code เราจริงๆ อาจจะมีแค่ 1 Mb แต่ package library ที่ต้อง upload กลับมีขนาดใหญ่กว่าเป็น 10 เท่า!!!
ผมพยายามหาวิธี deployment สวยๆ เช่นการใช้ grunt, gulp แต่กระนั้นก็ไม่วายที่ต้องเจอทางตันที่มันใช้ไม่ได้ เพราะไม่ใช่ทุกงานจะเป็น js, html มันยังมี PHP และ framework อื่นๆ ด้วย จึงต้องหาวิธีอื่นเพื่อมาจัดการ
บทความที่เกี่ยวข้องกับ yarn
yarn install เพื่อให้ได้ขนาด node_module ที่เล็กลง
สิ่งที่เราต้องมีคือ package.json หรือใช้ตัวอย่างนี้ก็ได้ครับ
{
"dependencies": {
"amcharts3": "^3.21.14",
"bootstrap3": "~3.*",
"bootswatch": "~3.*",
"chart.js": "^2.7.3",
"colorpicker-amin": "^1.2.1",
"datatables.net": "^1.10.19",
"datatables.net-bs": "~1.10.19",
"datatables.net-dt": "^1.10.19",
"datatables.net-fixedheader-bs": "^3.1.5",
"featherlight": "^1.7.13",
"font-awesome": "^4.7.0",
"highcharts": "^7.0.3",
"jquery": "^3.3.1",
"jquery-validation": "^1.19.0",
"materialize-css": "~1.0.0",
"morris.js": "^0.5.0",
"pickadate": "^3.6.0",
"raphael": "^2.2.7",
"select2": "4.0.5",
"select2-bootstrap-theme": "^0.1.0-beta.10",
"sweetalert": "^2.1.2",
"wowjs": "^1.1.3"
},
"name": "moremeng-package",
"version": "1.0.0",
"description": "sample package for yarn liteweight install",
"main": "index.php",
"author": "Thanikul Sriuthis",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
}สร้าง folder เปล่าๆ ขึ้นมาทดสอบ สร้างไฟล์ package.json เตรียมไว้ จากนั้นลอง install ด้วยคำสั่ง yarn install หรือ yarn เฉยๆ ก็ได้
yarn
ได้ข้อมูล 14,648 Files, 2,323 Folders ขนาดรวม 151MB
เราจะมาลดสิ่งที่ไม่จำเป็นออกด้วยโดยใช้คำสั่ง
yarn autoclean --initจะมีไฟล์ .yarnclean ถูกสร้างขึ้นมา โดยข้างในก็จะมีค่ามาตรฐานตามนี้ ไฟล์นี้เป็น config ของ autoclean ที่เราสามารถเพิ่มหรือลบเงื่อนไขได้เอง (ตรงนี้จะช่วยเรา save พื้นที่ลงได้เยอะ)
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
images
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
appveyor.yml
circle.yml
codeship-services.yml
codeship-steps.yml
wercker.yml
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
.travis.yml
# misc
*.mdจากนั้นสั่ง autoclean ให้ทำงาน ตาม config ตามคำสั่งนี้ ใส่ --force กันเหนียว
yarn autoclean --force
D:\yarn-lightweight (moremeng-package@1.0.0)
λ yarn autoclean --force
yarn autoclean v1.17.3
[1/1] Cleaning modules...
info Removed 13253 files
info Saved 63.02 MB.
Done in 17.85s.ไฟล์ถูกลบไป 13,253 files และลดพื้นที่ไป 63.02 MB
เปรียบเทียบของเดิม
14,648 Files, 2,323 Folders ขนาดรวม 151MB
3,373 Files, 345 Folders ขนาดรวม 88MB
ทีนี้ก็ลองทดสอบโดยลบทุกอย่างออกให้เหลือแค่ 2 ไฟล์นี้ .yarnclean และ package.json เพื่อทดสอบการติดตั้ง package ใหม่ แบบเบาๆ
เมื่อเราติดตั้ง package ใหม่ จะมี task ที่ 5/5 เพิ่มเข้ามา เนื่องจาก yarn พบไฟล์ .yarnclean มันจึงดำเนินการลบสิ่งที่เราไม่ต้องการออกไปด้วย ทุกครั้งที่มีการ install
สรุป
อย่างน้อยก็ช่วยลดขนาดจอง package ไปได้พอสมควร ถึงแม้มันจะไม่สามารถโหลดเฉพาะที่ใช้งานมาได้ก็ตาม แต่ก็ยังดีกว่าทำอะไรไม่ได้เลย ทั้งนี้ผมลองใช้ –production แล้ว มันก็ไม่ใช่อย่างที่ต้องการ ผมต้องการแค่ /dist หรือ .css .js ที่ใช้งานจริงๆเท่านั้น ส่วนที่ไม่ใช้ หรือ ที่อยู่ใน devDependencies มันไม่จำเป็น เพราะพอถึงเวลา upgrade สิ่งเหล่านี้มันก็ต้องถูกทับไปอยู่ดี
