mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-02 14:24:19 +01:00
41 lines
2.1 KiB
Markdown
41 lines
2.1 KiB
Markdown
|
---
|
||
|
|
layout: docs
|
||
|
|
title: Optimize
|
||
|
|
description: Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
|
||
|
|
group: customize
|
||
|
|
toc: true
|
||
|
|
---
|
||
|
|
|
||
|
|
## Lean Sass imports
|
||
|
|
|
||
|
|
When using Sass in your asset pipeline, make sure you optimize Bootstrap by only `@import`ing the components you need. Your largest optimizations will likely come from the `Layout & Components` section of our `bootstrap.scss`.
|
||
|
|
|
||
|
|
{{< scss-docs name="import-stack" file="scss/bootstrap.scss" >}}
|
||
|
|
|
||
|
|
|
||
|
|
If you're not using a component, comment it out or delete it entirely. For example, if you're not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.
|
||
|
|
|
||
|
|
## Lean JavaScript
|
||
|
|
|
||
|
|
Bootstrap's JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Popper.js) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you're customizing via Sass, be sure to remove related JavaScript.
|
||
|
|
|
||
|
|
## Autoprefixer browserslist.rc
|
||
|
|
|
||
|
|
Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `browserslist.rc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.
|
||
|
|
|
||
|
|
## Use Purge CSS
|
||
|
|
|
||
|
|
_Help wanted with this section, please consider opening a PR. Thanks!_
|
||
|
|
|
||
|
|
## Minify and gzip
|
||
|
|
|
||
|
|
Whenever possible, be sure to compress all the code you serve to your visitors. If you're using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you're building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.
|
||
|
|
|
||
|
|
## Nonblocking files
|
||
|
|
|
||
|
|
_Help wanted with this section, please consider opening a PR. Thanks!_
|
||
|
|
|
||
|
|
## Always use https
|
||
|
|
|
||
|
|
_Help wanted with this section, please consider opening a PR. Thanks!_
|