Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yibn2008/fast-css-loader
blazingly fast css loader for webpack
https://github.com/yibn2008/fast-css-loader
blazingly-fast css-loader fast-css-loader webpack
Last synced: about 2 months ago
JSON representation
blazingly fast css loader for webpack
- Host: GitHub
- URL: https://github.com/yibn2008/fast-css-loader
- Owner: yibn2008
- License: mit
- Created: 2016-08-27T05:30:51.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-05T10:42:37.000Z (over 6 years ago)
- Last Synced: 2024-07-05T05:59:41.008Z (3 months ago)
- Topics: blazingly-fast, css-loader, fast-css-loader, webpack
- Language: JavaScript
- Homepage:
- Size: 65.4 KB
- Stars: 22
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - fast-css-loader - blazingly fast css loader for webpack (JavaScript)
README
# fast-css-loader
Blazingly fast css loader for webpack (about 10 times faster than [css-loader](https://github.com/webpack-contrib/css-loader) when process large css files)
## install
```bash
npm install fast-css-loader --save-dev
```
## VS css-loader
fast-css-loader has higher performance when processing large css files, here is an example
when process a **24200+ lines** css file:
```text
-------------------------------------
CSS_LOADER COST: 1644 ms
FAST_CSS_LOADER COST: 116 ms
-------------------------------------
```
### Why faster?
fast-css-loader rewrites resolving parts of `@import` and `url(...)` with RegExp
and some tricks, it's extramely faster than postcss used by css-loader.
### Limitations
Compare with css-loader, fast-css-loader has these limitations:
- doesn't support sourceMap
- doesn't support minimize (you can minimize css with [mini-css-extract-plugin](https://www.npmjs.com/package/mini-css-extract-plugin))
- doesn't support `camelCase` option
- doesn't support css module
If you really need these features, just use original css-loader :)
## Usage
just like css-loader:
```js
module.exports = {
module: {
rules: [
{
test: /\.(svg|bmp|gif|png|jpe?g)$/,
loader: require.resolve('file-loader'),
options: {
name: '[name].[hash:8].[ext]'
}
},
{
test: /\.css$/,
use: [
'style-loader',
'fast-css-loader' // replace you css-loader with fast-css-loader
]
},
]
}
}
```
## Options
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`root`**|`{String}`|`/`|Path to resolve URLs, URLs starting with `/` will not be translated|
|**`url`**|`{Boolean}`|`true`| Enable/Disable `url()` handling|
|**`alias`**|`{Object}`|`{}`|Create aliases to import certain modules more easily|
|**`import`** |`{Boolean}`|`true`| Enable/Disable @import handling|
|**`importLoaders`**|`{Number}`|`0`|Number of loaders applied before CSS loader|
The above listed options are consistent with css-loader, for more detail please refer to [css-loader options](https://github.com/webpack-contrib/css-loader#options)
## License
MIT