Open kangyana opened 1 year ago
在打包器,比如 webpack 中,需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。
loader
module
在 webpack 中,处理 css 稍微比较费劲,需要借用两个 loader 来做成这件事情:
module.exports = { module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, };
url()
@import
@import url(./basic.css); .bg { background: url(./shanyue.png); }
如果说现代前端中 Javascript 与 CSS 是其中最重要的两种资源,那么 Babel 与 PostCSS 就是前端工程化中最有影响力的两个编译器。
Babel
PostCSS
css-loader 的原理就是 postcss,借用 postcss-value-parser 解析 CSS 为 AST,并将 CSS 中的 url() 与 @import 解析为模块。
css-loader
postcss
postcss-value-parser
style-loader 用以将 CSS 注入到 DOM 中,原理为使用 DOM API 手动构建 style 标签,并将 CSS 内容注入到 style 中。
style-loader
在其源码实现中,借用了许多运行时代码 style loader runtime (opens new window),而最简单的实现仅仅需要几行代码:
module.exports = function (source) { return ` function injectCss(css) { const style = document.createElement('style') style.appendChild(document.createTextNode(css)) document.head.appendChild(style) } injectCss(\`${source}\`) `; };
使用 DOM API 加载 CSS 资源,由于 CSS 需要在 JS 资源加载完后通过 DOM API 控制加载,容易出现页面抖动,在线上低效且性能低下。且对于 SSR 极度不友好。
由于性能需要,在线上通常需要单独加载 CSS 资源,这要求打包器能够将 CSS 打包,此时需要借助于 mini-css-extract-plugin (opens new window)将 CSS 单独抽离出来。
深入 webpack 中如何抽离 CSS 的源码有助于加深对 webpack 的理解。
在打包器,比如 webpack 中,需要借用
loader
将非 JS 资源转化成可识别为 Javascript 的module
。1. 现状
在 webpack 中,处理 css 稍微比较费劲,需要借用两个
loader
来做成这件事情:url()
与@import
,并将其视为模块引入,此处是通过 postcss 来解析处理,postcss 对于工程化中 css 处理的影响力可见一斑。2. 原理
如果说现代前端中 Javascript 与 CSS 是其中最重要的两种资源,那么
Babel
与PostCSS
就是前端工程化中最有影响力的两个编译器。css-loader
的原理就是postcss
,借用postcss-value-parser
解析 CSS 为 AST,并将 CSS 中的url()
与@import
解析为模块。style-loader
用以将 CSS 注入到 DOM 中,原理为使用 DOM API 手动构建 style 标签,并将 CSS 内容注入到 style 中。在其源码实现中,借用了许多运行时代码 style loader runtime (opens new window),而最简单的实现仅仅需要几行代码:
使用 DOM API 加载 CSS 资源,由于 CSS 需要在 JS 资源加载完后通过 DOM API 控制加载,容易出现页面抖动,在线上低效且性能低下。且对于 SSR 极度不友好。
由于性能需要,在线上通常需要单独加载 CSS 资源,这要求打包器能够将 CSS 打包,此时需要借助于 mini-css-extract-plugin (opens new window)将 CSS 单独抽离出来。
深入 webpack 中如何抽离 CSS 的源码有助于加深对 webpack 的理解。