贵州新农村建设专业网站,ftp空间网站,黄页88,wordpress不锈钢企业前言
最近在学习尚硅谷的webpack5课程#xff0c;看到mini-css-extract-plugin这个插件的时候#xff0c;感觉很有帮助#xff0c;之前都没有在css这方面深入思考过#xff0c;课程中的一些记录写在下面
为什么需要优化CSS
Css 文件目前被打包到 js 文件中#xff0c;当…前言
最近在学习尚硅谷的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-plugin2. 使用
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文件。再次刷新页面发现无闪屏现象。
注意
使用时将 style-loader 替换成 MiniCssExtractPlugin.loaderstyle-loader会创建style标签没有必要插件和loader都要进行替换才行
