前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >4-9 css 文件的代码分割

4-9 css 文件的代码分割

作者头像
love丁酥酥
发布2020-03-20 11:09:25
6440
发布2020-03-20 11:09:25
举报
文章被收录于专栏:coding for love

1. 简介

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

2. 打包 css

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

代码语言:javascript
复制
// index.js
import './style.css';
console.log('index');
代码语言:javascript
复制
/*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 内容打包到单独的文件进行输出。

首先安装:

代码语言:javascript
复制
npm install --save-dev mini-css-extract-plugin

修改 webpack.config.common.js

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 简介
  • 2. 打包 css
  • 3. MiniCssExtractPlugin
  • 3. 小结
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档