第八章 webpack5优化处理CSS

最新推荐文章于 2024-09-20 12:27:56 发布
最新推荐文章于 2024-09-20 12:27:56 发布
阅读量347 收藏 1
点赞数
分类专栏： Webpack5 文章标签： css javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36362721/article/details/128203266
版权

我们之前处理css资源只是简单的配置了一些loader，让webpack将其打包进bundle里面，但是这样对于项目加载以及用户体验不是很友好。

1. 提取CSS成单独文件

CSS 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式

这样对于网站来说，会出现闪屏现象，用户体验不好

我们应该是单独的 Css 文件，通过 link 标签加载性能才好

  • 安装所需依赖包
npm i mini-css-extract-plugin -D
  • 在webpack中配置插件

文件名：webpack.prod.js

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  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: [
	// ...
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  mode: "production",
};
  • 运行webpack打包
npm run build

观察dist目录变化情况，是否将css文件分离出来了。

2. CSS兼容处理

因为浏览器厂商众多，采用的浏览器内核各不相同，所以对CSS语法支持的程度也各不相同。

有的可能是语法不支持，有的可能是语法支持但是效果表现形态不同，反正都是因为 浏览器不同所造成的。

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。

  • 安装所需依赖包
npm i postcss-loader postcss postcss-preset-env -D
  • 在webpack中进行配置

文件名：webpack.prod.js

const path = require("path");
//...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
        // ...
    ],
  },
    
  mode: "production",
};

3. 控制兼容性

我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

文件名：package.json

{
  // 其他省略
  "browserslist": ["ie >= 8"]
}

想要知道更多的 browserslist 配置，查看browserslist 文档

以上为了测试兼容性所以设置兼容浏览器 ie8 以上。

实际开发中我们一般不考虑旧版本浏览器了，所以我们可以这样设置：

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

  • last 2 version: 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本

  • > 1%: 全球超过1%人使用的浏览器

  • not dead: 没有官方支持或更新超过24个月的浏览器。现在这些包括IE 11, IE Mobile 11，黑莓10，黑莓7，三星4,Opera Mobile 12.1和所有版本的百度（有道翻译的官方文档）。

4. 合并配置

由于我们每个处理样式的loader都使用到了postcss，我们这里简化一下代码

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
        // ...
   ]
  },
    // ...
}
  • 打包观察输出变化
npm run build

5. CSS压缩

  • 安装所需插件
npm i css-minimizer-webpack-plugin -D

这个插件使用 cssnano 优化和压缩 CSS。

  • 在webpack中进行配置

文件名：webpack.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// ...
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
     // ...
    ],
  },
  plugins: [
    // ...
    // css压缩
    new CssMinimizerPlugin(),
  ],

  mode: "production",
};

6.完整的生产模式配置

文件名：webapck.prod.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-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",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};
  • 运行打包命令观察效果
npm run build
ppt课件-第10章 使用webpack.zip
03-22
5. **Loaders**：Loaders 用于转换不同类型的模块，例如Babel Loader将ES6/7代码转换为浏览器可执行的ES5代码，style-loader和css-loader处理CSS。 6. **Plugins**：Webpack 插件可以扩展Webpack的功能，如...
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 2300
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
webpack快速入门-处理css方面优化
温情
09-05 374
样式需要加不同的浏览器前缀才能兼容对应的浏览器，因此在项目打包编译的时候，需要对。文件，配置css压缩前和配置css压缩后有很明显的变化。这样对于网站来说，可能会出现闪屏现象，用户体验不好。属性进行统一的兼容性处理。文件加载时，会创建一个。文件不处理会被打包到。我们应该要使用单独的。标签加载提高用户体验。
【Webpack】处理CSS资源详解
最新发布
lph159的博客
09-20 907
在大型应用中，CSS命名冲突是一个常见问题。CSS Modules是一种模块化CSS的方案，它可以将CSS的作用域限制在当前模块，避免全局污染。Webpack提供了灵活且强大的方式来处理CSS资源，从基础的样式导入、预处理器支持、模块化管理，到生产环境中的CSS优化。通过合理配置Webpack，我们可以在开发过程中高效地管理和优化CSS资源，提升应用的性能和用户体验。
Webpack5中CSS处理(单独文件、兼容及压缩)
小洋人最happy的专栏
05-27 2080
文章目录一、CSS处理1.1 单独文件1.1.1 安装依赖1.1.2 配置1.1.3 测试1.2 兼容处理1.2.1 安装依赖1.2.2 配置1.2.3 控制兼容性1.2.4 测试1.3 压缩1.3.1 安装依赖1.3.2 配置1.3.3 测试二、HTML处理2.1 压缩 一、CSS处理 1.1 单独文件 css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好 我们应该是单独的css文件，通过link标签加载性能才好 1.1.1
7.webpack对css文件优化
qq_74217055的博客
03-14 419
Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好2.配置webpack.config.js。
webpack5配置CSS
red_password的博客
11-02 528
webpack配置css
webpack4 CSS Tree Shaking的使用
12-01
Webpack 4 中的 CSS Tree Shaking 是一种优化技术，用于减少构建后的 CSS 代码体积，通过移除未使用的样式规则。这一概念源自于 Rollup.js，后来被 Webpack 2 引入并广泛采用。Tree Shaking 在 JavaScript 中主要是...
详解webpack打包第三方类库的正确姿势
10-17
webpack作为现代前端开发中广泛使用的一种模块打包工具，它能够将项目中所有的JavaScript代码模块（包括JavaScript文件、CSS、图片等资源）进行打包处理，最终生成浏览器能够识别并正确执行的静态资源。打包第三方...
webpack学习笔记之优化缓存、合并、懒加载
08-29
Webpack 是一个流行的模块打包工具，它能够将 JavaScript、CSS、图片等资源文件转换并整合到一起，便于在浏览器中高效地加载和运行。本篇学习笔记重点探讨了 Webpack 的优化策略，包括缓存管理、文件合并以及懒加载...
css-minimizer-webpack-plugin:Webpack的cssnano插件
04-28
css-minimizer-webpack-plugin 该插件使用来优化和缩小CSS。 就像但是使用查询字符串对源映射和资产更准确时，它可以缓存并在并行模式下工作。 入门 首先，您需要安装css-minimizer-webpack-plugin ： $ npm install css-minimizer-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。 例如： webpack.config.js const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) ; const CssMinimizerPlugin = require ( 'css-minimizer-webpack-plugin' ) ; module . exports = { module
webpack指南（优化篇）——webpack项目优化
前端成长之路
03-07 1412
面试的时候总是会问用webpack对项目做过哪些优化，今天我们就来详细列举一下常用的优化手段；前面我们利用webpack构建了一个项目，今天我们在原项目基础上进行优化，还没有观看的小伙伴可以移步看一下。关于webpack常见的性能优化，我们可以从两个方面去着手考虑：1.传输性能优化；通过优化代码体积等手段提高资源传输速度，达到优化目的；2.构建过程优化；主要是提高webpack的打包速度；
webpack优化和压缩css代码示例：优化压缩css
qq_36413371的博客
05-14 287
如果你已经在 webpack 配置中使用了 css-minimizer-webpack-plugin，那么实际上你已经在间接地使用 cssnano 了。cssnano可以删除不必要的空格、注释、重复规则等，从而减小文件大小，提高页面加载速度。创建postcss.config.js文件。
webpack性能优化---------------详解
m0_57103064的博客
07-16 961
第三种分包的模式是splitChunk，它底层是使用SplitChunksPlugin来实现的：因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；只需要提供SplitChunksPlugin相关的配置信息即可；1.Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；2.SplitChunks自定义配置解析。
如何⽤webpack 来优化前端性能
songshao の blog
08-09 740
⽤webpack 优化前端性能是指优化 webpack 的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。
【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源、字体图标、js资源（ESlint和Babel）、html资源）
qiaoyangla的博客
05-30 741
webpack中文文档webpack 中文网 首先安装css-loader npm install --save-dev css-loader 想要webpack打包资源，需要在主文件中引入css文件 import css from 'file.css'; 在webpack.config.js中，因为使用了style-loader，也需要安装 npm install style-loader module.exports = { module: { rules: [ .
Webpack打包压缩
m0_63535801的博客
01-30 1570
浏览器从服务器访问网页时获取的 JavaScript、CSS 资源都是文本形式的，文件越大网页加载时间越长。为了提升网页加速速度和减少网络传输流量，可以对这些资源进行压缩。压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩。对文本本身进行压缩的作用除了有提升网页加载速度的优势外，还具有混淆源码的作用。由于压缩后的代码可读性非常差，就算别人下载到了网页的代码，也大大增加了代码分析和改造的难度。下面来一一介绍如何在 Webpack 中压缩代码。
前端工程化之Webpack优化
weixin_52884694的博客
09-13 2745
❝ 打不垮我的，将使我更加坚强 --尼采 ❞ 大家好，我是「柒八九」。 好久没更文了，其实这段时间，一直没闲着。在准备一些比较重要的东西。忙着跑步，忙着学习，忙着xx。 总之就是，一直在忙着，从未停歇。 虽然，这段时间，没有文章的发布，其实，在私底下，已经有不下10篇的文章已经起手了。等再润色一下，就会和大家见面。 学习总结 这是，我之前学习总结，后期会逐步给大家免费分享。敬请期待。 好了，闲话少叙。 今天，我们来谈谈关于-- Webpack的打包优化。 你能所学到的知识点 ❝ Webpack Loa
webpack4.0打包优化策略详解
"本文总结了webpack4.0的打包优化策略，包括对loader配置的优化、缓存机制的利用以及resolve配置的改进，旨在提高构建效率和项目性能。" 在webpack4.0中，为了提升打包效率和优化资源管理，开发者可以采取一系列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天界程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值