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 这两个类。代码如下所示：
/* base.css */
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 文件中。文件内容如下图所示（肯定好多朋友懒得手动打包）：
我们在index.html 和 src/app.js 中引用的样式都被打包了，而没有被使用的样式类--box-small，就没有出现在图片中。成功！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
webpack2.0配置postcss-loader的方法
本文介绍使用webpack2.0配置postcssloader,分享给大家.具体如下: 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports =
-
webpack处理 css\less\sass 样式的方法
本文介绍了webpack处理 css\less\sass 样式的方法,分享给大家,具体如下: (一)处理普通的.css 文件,需要安装 css-loader,style-loader .less 文件,需要安装 less-loader .sass 文件,需安装 less-loader npm install --save-dev css-loader npm install --save-dev css-loader npm install less-loader --save-dev (二)
-
webpack4 处理SCSS的方法示例
这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可. 1. 准备工作 为了方便叙述,这次代码目录的样式文件只有一个scss文件,以帮助我们了解核心 LOADER 的使用. 下图展示了这次的目录代码结构: 目录结构 这次我们需要用到node-sass,sass-loader等 LOADER,package.json如下: { "devDependencies": { "css-loader": "^1.
-
webpack分离css单独打包的方法
本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点. 2018-02-01 14:45:23 由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 2016-05-17 11:55 刚学习web
-
webpack 打包压缩js和css的方法示例
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 webpack -p 即表示调用UglifyJS来压缩代码,还有不少webpack插件如 html-webpack-plugin 也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用开发分支. UglifyJS可用的选项有: parse
-
webpack与SPA实践之管理CSS等资源的方法
上一篇介绍了如何使用webpack搭建一个稳定的支持本地服务.自动刷新.模块热替换.使用ES6编写JavaScript的开发环境,本篇主要介绍webpack如何处理HTML应用三大元素的另一元素 – CSS及其他诸如图片.字体文件或者数据配置文件等资源. 前言 在学习使用webpack时,我们需要明白无论它怎么设计,它的工作原理.流程是什么,最根本的它处理的还是HTML文档中的HTML标签.JavaScript.CSS.图片等资源,而且最终的处理结果依然必须是一个HTML文档,包括DOM.Jav
-
详解webpack分离css单独打包
这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中. 但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 一.extract-text-webpack-plugin 使用方法 这个操作很简单的,只需要一个插件就好了,就是e
-
详解webpack之scss和postcss-loader的配置
本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **
-
webpack4 css打包压缩问题的解决
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, // webpack.config.js module.exports = { // webpack会根据mode进行对Js打包,development压缩,production下面自动压缩,亲测没有问题 mode: 'development' // productio
-
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
-
浅谈Webpack4 Tree Shaking 终极优化指南
几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到
-
webpack的tree shaking的实现方法
webpack的tree shaking util.js export const a = () => { console.log("a123456方法"); }; export const b = () => { console.log("b123456方法"); }; main.js import {a} from './utils'; a(); sideEffects 一般而言,上述代码,在 webpack 进行 tree shaking 能够不打
-
tree shaking对打包体积优化及作用
目录 背景 有啥用? 实践 前置准备 打包 sideEffects 副作用 sideEffects的使用 优化体积 背景 大家平时在查 webpack构建体积优化 ,可能都会查到 tree-shaking 这个东西,很多人看到这个东西,就会把它背下来,用来应付以后面试官可能会问到的情况. 但是,又有多少人去真的了解一下 tree-shaking 呢?自己去实践一下看 tree-shaking 到底起了哪些作用?对于我们的打包体积的优化又有多少呢? 有啥用? Tree Shaking中文含义是摇树
-
JS 加载性能Tree Shaking优化详解
目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS
-
Tree Shaking实现方法指南
目录 正文 方式一:JavaScript模拟 方式二:利用AST实现 正文 当使用JavaScript框架或库时,代码中可能会存在许多未使用的函数和变量,这些未使用的代码会使应用程序的文件大小变大,从而影响应用程序的性能.Tree shaking可以解决这个问题,它可以通过检测和删除未使用的代码来减小文件大小并提高应用程序性能. 接下来我们将通过两种方式实现Tree shaking 方式一:JavaScript模拟 1.首先,你需要使用ES6模块来导出和导入代码.ES6模块可以静态分析,从而使T
-
使用webpack搭建vue项目及注意事项
有一句话叫"前人栽树后人乘凉",还有一句话叫"如果说我看得比别人更远些,那是因为我站在巨人的肩膀上".前一句是国人的俗语,后一句是那个发现了"万有引力"定律的牛顿说的.为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用:我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事.使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不
-
webpack4.0打包优化策略整理小结
本文介绍了webpack4.0打包优化策略整理小结,分享给大家,具体如下: webapck4 新特性介绍-参考资料 当前依赖包的版本 1.优化loader配置 1.1 缩小文件匹配范围(include/exclude) 通过排除node_modules下的文件 从而缩小了loader加载搜索范围 高概率命中文件 module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/, // 排除不处理的目录
-
详解基于Vue cli生成的Vue项目的webpack4升级
前面的话 本文将详细介绍从webpack3到webpack4的升级过程 概述 相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单 在未来,CSS.HTMl和文件都会成为原生模块 [0配置] webpack4 设置了默认值,以便无配置启动项目 entry 默认值是 ./src/ output.path 默认值是 ./dist mode 默认值是 production [模块类型] web