扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >webpack4 CSS Tree Shaking怎么用
  • 161

0
分享到

webpack4 CSS Tree Shaking怎么用

2024-04-02 19:04:59 161人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“webpack4 CSS Tree Shaking怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“WEBpack4 CSS Tre

这篇文章主要为大家展示了“webpack4 CSS Tree Shaking怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“WEBpack4 CSS Tree Shaking怎么用”这篇文章吧。

代码目录(如下图所示)：

webpack4 CSS Tree Shaking怎么用

什么是tree-shaking

webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js，先如今，webpack 2也有类似的做法。

webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说，如今的前端模块规范很多，比较出流行的比如commonJS , AMD , es6 ，我简单的说一下commonJS和es6模块的区别。

1. CSS 也有 Tree Shaking？

是滴，随着 webpack 的兴起，css 也可以进行 Tree Shaking： 以去除项目代码中用不到的 CSS 样式，仅保留被使用的样式代码。

为了方便理解 Tree Shaking 概念，并且与 JS Tree Shaking 进行横向比较，请查看：webpack4 系列教程(八): JS Tree Shaking

2. 项目环境仿真

因为 CSS Tree Shaking 并不像 JS Tree Shaking 那样方便理解，所以首先要先模拟一个真实的项目环境，来体现 CSS 的 Tree Shaking 的配置和效果。

我们首先编写 /src/css/base.css 样式文件，在文件中，我们编写了 3 个样式类。但在代码中，我们只会使用 .box 和 .box--big 这两个类。代码如下所示：


html {
 background: red;
}

.box {
 height: 200px;
 width: 200px;
 border-radius: 3px;
 background: green;
}

.box--big {
 height: 300px;
 width: 300px;
 border-radius: 5px;
 background: red;
}

.box-small {
 height: 100px;
 width: 100px;
 border-radius: 2px;
 background: yellow;
}

按照正常使用习惯，DOM 操作来实现样式的添加和卸载，是一贯技术手段。所以，入口文件 /src/app.js 中创建了一个 <div> 标签，并且将它的类设为 .box

// app.js

import base from "./css/base.css";

var app = document.getElementById("app");
var div = document.createElement("div");
div.className = "box";
app.appendChild(div);

最后，为了让环境更接近实际环境，我们在index.html的一个标签，也引用了定义好的 box-big 样式类。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta Http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./dist/app.min.css" rel="external nofollow" >
 <title>Document</title>
</head>
<body>
 <div id="app">
 <div class="box-big"></div>
 </div>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

按照我们的仿真的环境，最终 Tree Shaking 之后的效果应该是：打包后的 css 文件不含有 box-small 样式类。下面，就实现这个效果！

3. 认识下 PurifyCSS

没错，就是这货帮助我们进行 CSS Tree Shaking 操作。为了能准确指明要进行 Tree Shaking 的 CSS 文件，它还有好朋友 glob-all （另一个第三方库）。

glob-all 的作用就是帮助 PurifyCSS 进行路径处理，定位要做 Tree Shaking 的路径文件。

它们俩搭配起来，画风如下：

const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");

let purifyCSS = new PurifyCSS({
 paths: glob.sync([
 // 要做CSS Tree Shaking的路径文件
 path.resolve(__dirname, "./*.html"),
 path.resolve(__dirname, "./src/*.js")
 ])
});

好了，这只是一个小小的 demo。下面我们要把它用到我们的webpack.config.js中来。

4. 编写配置文件

为了方便最后检查打包后的 css 文件，配置中还使用了 extract-text-webpack-plugin 这个插件。如果忘记了它的用法，请查看：

webpack4 系列教程(六): 处理 SCSS
webpack4 系列教程(五): 处理 CSS

所以，我们的package.JSON文件如下：

{
 "devDependencies": {
 "css-loader": "^1.0.0",
 "extract-text-webpack-plugin": "^4.0.0-beta.0",
 "glob-all": "^3.1.0",
 "purify-css": "^1.2.5",
 "purifycss-webpack": "^0.7.0",
 "style-loader": "^0.21.0",
 "webpack": "^4.16.0"
 }
}

安装完相关插件后，我们需要在 webpack 的plugins配置中引用第三部分定义的代码。

然后结合extract-text-webpack-plugin的配置，编写如下webpack.config.js:

// webpack.config.js
const path = require("path");
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
 filename: "[name].min.css",
 allChunks: false
});

let purifyCSS = new PurifyCSS({
 paths: glob.sync([
 // 要做CSS Tree Shaking的路径文件
 path.resolve(__dirname, "./*.html"), // 请注意，我们同样需要对 html 文件进行 tree shaking
 path.resolve(__dirname, "./src/*.js")
 ])
});

module.exports = {
 entry: {
 app: "./src/app.js"
 },
 output: {
 publicPath: __dirname + "/dist/",
 path: path.resolve(__dirname, "dist"),
 filename: "[name].bundle.js",
 chunkFilename: "[name].chunk.js"
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  fallback: {
  loader: "style-loader",
  options: {
  singleton: true
  }
  },
  use: {
  loader: "css-loader",
  options: {
  minimize: true
  }
  }
 })
 }
 ]
 },
 plugins: [extractTextPlugin, purifyCSS]
};

5. 结果分析

命令行运行webpack打包后，样式文件被抽离到了 /dist/app.min.css 文件中。文件内容如下图所示（肯定好多朋友懒得手动打包）：

webpack4 CSS Tree Shaking怎么用

我们在index.html 和 src/app.js 中引用的样式都被打包了，而没有被使用的样式类--box-small，就没有出现在图片中。成功！

以上是“webpack4 CSS Tree Shaking怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！

--结束END--

本文标题: webpack4 CSS Tree Shaking怎么用

本文链接: https://lsjlt.com/news/73873.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • webpack4 CSS Tree Shaking怎么用
    这篇文章主要为大家展示了“webpack4 CSS Tree Shaking怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“webpack4 CSS Tre...
    99+
    2024-04-02
  • Webpack4 Tree Shaking优化的示例分析
    这篇文章将为大家详细讲解有关Webpack4 Tree Shaking优化的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。先说好处在讨论技术细节之前，让我先总结一...
    99+
    2024-04-02
  • tree shaking对打包体积优化及作用
    目录背景有啥用？实践前置准备打包sideEffects副作用sideEffects的使用优化体积背景 大家平时在查 webpack构建体积优化 ，可能都会查到 tree-shakin...
    99+
    2024-04-02
  • JS加载性能Tree Shaking优化的方法是什么
    这篇文章主要介绍了JS加载性能Tree Shaking优化的方法是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JS加载性能Tree Shaking优化的方法是什么文章都会有所收获，下面...
    99+
    2023-07-04
  • tree shaking对打包体积优化及作用实例分析
    这篇“tree shaking对打包体积优化及作用实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“tree&...
    99+
    2023-07-02
  • webpack4 react报错怎么办
    本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。webpack4 react报错怎么办？react 项目本地升级webpack4后报错解决办法报错如上图：解决办法，进入全局安装的webpack目录下：进...
    99+
    2023-05-14
    React webpack
  • linux的tree命令怎么用
    这篇文章主要介绍了linux的tree命令怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。tree如果你想查看你的文件的树状结构，tre...
    99+
    2024-04-02
  • Linux下tree命令怎么用
    这篇文章给大家分享的是有关Linux下tree命令怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。tree是一种递归目录列表命令，产生一个深度缩进列表文件，这是彩色的ALA dircolors如果ls_col...
    99+
    2023-06-28
  • Linux tree命令怎么使用
    这篇文章主要讲解了“Linux tree命令怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Linux tree命令怎么使用”吧！tree故名思意就是树的意思，在Linux系统中tre...
    99+
    2023-06-28
  • Linux中tree命令怎么用
    这篇文章将为大家详细讲解有关Linux中tree命令怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。Linux常用命令tree命令 以树状图列出目录的内容。tree树状图列出目录的内容语法 ...
    99+
    2023-06-28
  • cmd中tree命令怎么用
    这篇文章主要介绍cmd中tree命令怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！当你向别人展示你自己所做光盘的内容的时候，或者是罗列你硬盘上某个目录下的资料的时候，tree命令显得相当方便，并且能让你展示的内...
    99+
    2023-06-08
  • webpack4中splitChunk插件有什么用
    这篇文章主要介绍webpack4中splitChunk插件有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！常用参数minSize(默认是30000)：形成一个新代码块最小的体积...
    99+
    2024-04-02
  • ElementUI Tree树形控件怎么用
    小编给大家分享一下ElementUI Tree树形控件怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一，数据渲染1）在&l...
    99+
    2024-04-02
  • vue树形控件tree怎么用
    这篇文章给大家分享的是有关vue树形控件tree怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。具体内容如下<template>  <div class=&qu...
    99+
    2023-06-29
  • tree插件怎么在centos中使用
    这篇文章给大家介绍tree插件怎么在centos中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。tree的安装: yum -y install tree 或者是 sudo apt-get install tree ...
    99+
    2023-06-10
  • Linux系统中tree命令怎么用
    小编给大家分享一下Linux系统中tree命令怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！在Linux系统中 tree命令主要用于以树状图列出目录的内容,...
    99+
    2023-06-28
  • Flex4怎么使用itemRenderer为Tree加线
    要为Flex4的Tree组件添加线条，可以使用自定义的itemRenderer来实现。首先，创建一个名为CustomTreeItem...
    99+
    2023-08-15
    Flex4 itemRenderer
  • mysql为什么使用b-tree
    mysql使用b-tree作为索引结构的主要原因有以下几点：1、高效的平衡性，B-tree是一种自平衡的树状数据结构，能够自动调整树的结构以保持平衡；2、适应磁盘存储特性，B-tree的节点大小通常设置与页的大小相同，使得一个节点即可加载到...
    99+
    2023-07-28
  • jquery tree点击事件怎么实现
    本篇内容介绍了“jquery tree点击事件怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 　...
    99+
    2024-04-02
  • 怎么使用Vue组件tree实现树形菜单
    本篇内容主要讲解“怎么使用Vue组件tree实现树形菜单”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用Vue组件tree实现树形菜单”吧!vue 编写的树形菜单，小巧实用，支持vue1....
    99+
    2023-07-04
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作