极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# style

在打包器,比如 webpack 中,需要借用 loader 将非 JS 资源转化成可识别为 Javascript 的 module。

在 webpack 中,处理 css 稍微比较费劲,需要借用两个 loader 来做成这件事情:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
  1. css-loader (opens new window): 处理 CSS 中的 url@import,并将其作为模块引入
  2. style-loader (opens new window): 将样式注入到 DOM 中
@import url(./basic.css);

.bg {
  background: url(./shanyue.png);
}

如果说现代前端中 Javascript 与 CSS 是其中最重要的两种资源,那么 BabelPostCSS 就是前端工程化中最有影响力的两个编译器。

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),而最简单的实现仅仅需要几行代码:

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 的理解。

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 7/21/2019, 11:25:08 AM