【前端学习记录】webpack学习之mini-css-extract-plugin插件

news/2024/10/22 13:17:25/

前言

最近在学习尚硅谷的webpack5课程,看到mini-css-extract-plugin这个插件的时候,感觉很有帮助,之前都没有在css这方面深入思考过,课程中的一些记录写在下面

为什么需要优化CSS

Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式(先去加载js文件,再去创建style 标签来生成样式)

这样对于网站来说,会出现闪屏现象,用户体验不好(控制台newwork调慢时可以看到一个白屏,当js解析完成后,才会看到页面)

如何解决

我们应该是单独的 Css 文件,通过 link 标签加载性能才好。因此我们要将CSS给提取出来,以此来优化性能。

在webpack5中有一个插件可以解决这个问题,即mini-css-extract-plugin

MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。

本插件基于 webpack v5 的新特性构建,并且需要 webpack 5 才能正常工作。

与 extract-text-webpack-plugin 相比:

  • 异步加载
  • 没有重复的编译(性能)
  • 更容易使用
  • 特别针对 CSS 开发

使用方法

1. 安装

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

2. 使用

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {...module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, "css-loader"],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],},},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, "../src"),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, "../public/index.html"),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: "static/css/main.css",}),],mode: "production",
};

打包

npm run build 

执行命令后打包文件夹下会生成一个css文件。再次刷新页面,发现无闪屏现象。

注意

  1. 使用时将 style-loader 替换成 MiniCssExtractPlugin.loader(style-loader会创建style标签,没有必要)
  2. 插件和loader都要进行替换才行

http://www.ppmy.cn/news/33741.html

相关文章

《扬帆优配》新增21亿订单,海风龙头获多路资金抢筹!

今天仅三个职业获主力资金净流入。 证券时报数据宝计算,今天沪深两市主力资金净流出295.18亿元,其间创业板净流出76.61亿元,沪深300成份股净流出92.15亿元。 申万一级职业中,今天传媒、电子、有色金属等6个职业上涨。25个跌落职业…

手撕数据结构—栈

Tips不得不再次提一下这个语法问题,当数组创建的时候,进行初始化的时候,分为全部初始化或者说部分初始化,对于不完全初始化而言,剩下的部分就全部默认为零。现在比如说你想对整型数组的1万个元素把它全部变成-1&#x…

用Pytorch构建一个喵咪识别模型

本文参加新星计划人工智能(Pytorch)赛道:https://bbs.csdn.net/topics/613989052 目录 一、前言 二、问题阐述及理论流程 2.1问题阐述 2.2猫咪图片识别原理 三、用PyTorch 实现 3.1PyTorch介绍 3.2PyTorch 构建模型的五要素 3.3PyTorch 实现的步骤 3.3.…

Mybatis(一):环境搭建

Mybatis(一):环境搭建前言一、MyBatis简介1、MyBatis历史2、MyBatis特性3、MyBatis下载4、和其它持久化层技术对比二、搭建MyBatis1、开发环境2、创建maven工程2.1 打包方式:jar2.2 引入依赖3、创建MyBatis的核心配置文件4、创建m…

hash值——软件中的唯一标识符

在软件中,“ hash”这个词有多种含义,但是我们在这里讨论的是维基百科所谓的 “cryptographic hash function”.。 hash是什么 简而言之,hash是字母和数字的字符串,意味着通过一个较小的、唯一的代码来识别一组信息。您可能在其…

RapidAI/paddleocr_convert:PaddleOCR中模型快速转换为ONNX格式

目录RapidAI/paddleocr_convert使用步骤更新日志RapidAI/paddleocr_convert 本仓库主要是针对性地将PaddleOCR中推理模型转换为ONNX格式。注意: 输入:推理模型的url或者本地tar路径输出:转换后的ONNX模型如果是识别模型,需要提供对…

图形视图框架 事件处理(item)

在图形界面框架中的事件都是先由视图进行接收,然后传递给场景,再由场景传递给图形项。通过键盘处理的话,需要设置焦点,在QGraphicsScene中使用setFoucesItem()函数可以设置焦点,或者图形项使用s…

技术分享 | PBM备份恢复

作者:张洪 爱可生南区 DBA 团队成员,主要负责mysql故障处理及相关技术支持。爱好旅游,摄影。 本文来源:原创投稿 *爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编并注明来源。 概述 Per…