4-9 css 文件的代码分割

1. 简介

本节主要是介绍 MiniCssExtractPlugin 插件，该插件用于将 css 提取成单独的文件。

2. 打包 css

我们来看一下，webpack 是如何进行 css 文件的打包。新建一个 style.css 文件，并在 index.js 中引入：

// index.js
import './style.css';
console.log('index');

/*style.css*/

body {
    background: green;
}

打包如下：

image.png

image.png

css 文件不存在，index.html 中也不存在 style 或者 link，但是 index.js 中却存在 css 先关逻辑:

image.png

可以看到 css 文件被打包到了 index 文件进行输出。打开 elements 可以看到：

image.png

最终 css 因为 styleloader 执行后被注入到 html 中。那如果我们想单独输出 css 文件该如何做呢？

3. MiniCssExtractPlugin

我们可以利用 MiniCssExtractPlugin 插件将 css 内容打包到单独的文件进行输出。

首先安装：

npm install --save-dev mini-css-extract-plugin

修改 webpack.config.common.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

再次打包，如下：

image.png

image.png

image.png

image.png

可以看到下载下来的 html 文件，直接通过 link 引入了单独的 css 文件。

3. 小结

其实这一节内容很简单，主要就是 MiniCssExtractPlugin 的使用，更多的配置比如 HMR ，环境区分配置等可以直接看文档。

关于 css 为什么要单独提取，我并没有看到哪里有说原因。我所能想到的，第一是方便资源的管理和更新，css 和 js 放到线上以后可以单独更新。另外就是 css 较大，或者 js 逻辑较多时，不会互相阻塞。因为 css 单独通过 link 引入，而 link 不会阻塞 dom 解析，只会阻塞 render 和 script 执行而已，此时一旦 link 下载完毕，就会优先渲染一波，提高首屏速度。这里逻辑可以看浏览器加载解析渲染机制的全面解析

参考

https://webpack.js.org/plugins/mini-css-extract-plugin/

https://www.npmjs.com/package/mini-css-extract-plugin