Để xóa kiểu danh sách trong Bootstrap, hãy sử dụng. lớp không theo kiểu danh sách
Bạn có thể thử chạy đoạn mã sau để triển khai. lớp không theo kiểu danh sách -
Ví dụ
Bản thử trực tiếp
Bootstrap Example
Technologies
- Home
- PHP
- Java
- jQuery
- JavaScript
- Ruby
Technologies [Unstyled]
- Home
- PHP
- Java
- jQuery
- JavaScript
- Ruby
Giảm kích thước nội dung là một trong những cách thiết thực nhất để tăng tốc ứng dụng web của bạn. Tôi có một trường hợp sử dụng đơn giản, hãy tưởng tượng tệp HTML của bạn trông như thế này
Tệp HTML của bạnBây giờ hãy nhìn vào bootstrap-grid.min.css
Khá lớn phải không?
Cách sử dụng
Purgecss có thể được cài đặt với gói npmnpm i --save-dev purgecss
Về cơ bản, bạn chạy nó với các tệp CSS và tệp HTML/JavaScript của bạn. Nó sẽ phân tích cú pháp và phân tích nội dung CSS nào sẽ được sử dụng và loại bỏ nội dung CSS không sử dụng
PurgeCSS có thể được sử dụng như một CLI. Đây là cấu trúc dự án của chúng tôi, chúng tôi sẽ cần chuyển đổi các tệp CSS, vì vậy chúng tôi phải tải xuống bản phân phối bootstrap và nhận tệp chúng tôi muốn chuyển đổi
Cấu trúc dự án
Đây là cú pháp của lệnh CLI
purgecss --css --content --out
Vì Purgecss được cài đặt trong /node_modules
nên chúng ta phải chạy lệnh này thông qua tập lệnh npm. Chúng tôi sử dụng tùy chọn
purgecss --css --content --out
0 để lưu trữ các tệp CSS đầu ra trong thư mục purgecss --css --content --out
1 sau khi chuyển đổi. Bây giờ thay đổi đường dẫn của bootstrap-grid.min.css
trong 0 thành
Sau đó tạo npm script để chạy purgecss
Sau đó chạy npm run build, bạn sẽ thấy bootstrap-grid mới. tối thiểu. css trong thư mục dist với nội dung CSS không sử dụng đã bị xóa
Nội dung file CSS sau khi loại bỏ các lớp CSS không sử dụng
Kích thước tệp giảm từ 48kb xuống 651byte. Kinh ngạc
Bạn có thể xem các tùy chọn CLI đầy đủ tại https. //www. thanh trừng. com/cli
kho ví dụ. https. //github. com/PhmNgocNghia/purge-css-demo-cli
Thiết lập bằng WebpackPurge CSS có thể được sử dụng cùng với các công cụ được tạo sẵn như webpack, gulp, grunt, v.v. Bạn có thể xem tài liệu của nó tại https. //www. thanh trừng. com/
Tôi sẽ trình bày cách tích hợp với Webpack. Đây là dự án đơn giản của tôi tích hợp dự án và Webpack
trong chỉ mục của tôi. js, tôi chỉ cần nhập CSS lưới bootstrap
// Import CSS Grid min CSSimport 'bootstrap/dist/css/bootstrap-grid.min.css'
Đây là đầu ra bản dựng bao gồm tệp lưới CSS
Tệp CSS chiếm tới 47. 3 kb
Để sử dụng Purgecss với Webpack, chỉ cần cài đặt plugin Webpack này
npm i purgecss-webpack-plugin -D
Sau đó thêm nó vào phần plugin trong tệp cấu hình Webpack
chủ yếu. file css sau khi tối ưu phải nhỏ hơn nhờ purgecss
Kho ví dụ đầy đủ. https. //github. com/PhmNgocNghia/purge-css-example-webpack
Phần kết luậnVới Purgecss, tệp
1 của chúng tôi giảm từ 47kb xuống còn 601byte. Tất cả các bộ chọn không sử dụng đã bị xóa. Bạn có thể xem tài liệu tại https. //www. thanh trừng. com/ chứa hướng dẫn chi tiết và tham chiếu api
Không chỉ bootstrap, bạn có thể sử dụng Purgecss với nhiều thư viện css như TailwindCSS, Zurb Foundation,. vân vân