css tree shaking

我们和webpack(三)一样，用案例说话

安装css需要的两个loader，css-loader 和style-loader

npm install css-loader style-loader -D
复制代码

在项目webpack.config.js配置文件中配置

在html文件中写一些结构

创建css文件，在里面写一些页面中有的和没有的css样式，没有的用来验证css抖动

在入口文件index.js中将依赖的css文件引入

执行npm run dev

css样式被打包到出口文件中，可以看到在打包好的文件里搜索background-color能够搜到

两个插件

mini-css-extract-plugin

单独将css代码抽离成能打包的文件的插件

下载

npm install --save-dev mini-css-extract-plugin
复制代码

在配置文件中引入

在当前开发环境下载局部webpack

下载方式见webpack学习(一)

执行npm run dev,会发现dist文件夹中多出main.css文件

在index.html文件中引入打包后的css文件

在main.js中搜索background-color，发现没搜到，是因为我们已经给样式单独打包出css文件了，js文件里就没有行内样式了

*注：单独抽离css样式和把css解析成行内样式二者不可兼得，水火不相容

到这为止这个插件已经实现了将css样式单独抽离出文件的目的啦，接下来看下一个插件，把css文件也抖一下

purifycss-webpack

支持css tree shaking的插件

下载

npm i -D purifycss-webpack purify-css
复制代码

原理

将html里的dom结构与css里的样式进行匹配，若匹配成功则不进行抖动，当然要根据哪个文件进行抖，是需要我们手动配置规定的

配置方法(先只根据一个Html进行抖动)

下图是只根据当前路径下的所有html文件进行抖动

css抖动一定要放在js之前，否则会报错。

引入node的一些公共变量

执行npm run dev,再看main.css中发现没有用到的都被抖掉了

上述只是dom和css能匹配的情况，那么如果我们在js里动态插入dom结构，这个插件还会好使吗？

js中插入dom

执行npm run dev，发现a标签还是被抖掉了，没有留下来，是因为我们在配置文件中设置的是与html对比，并没有配置与js文件对比

如果想要匹配js，就可以在配置文件上再加上一条

这时候需要注意的是，我们要用到全局匹配，因此在引入glob时就需要引入glob-all,下载glob-all并引入

执行npm run dev,a就不会被抖掉了

以上两个插件帮助我们把css代码做了优化，但需要注意的是，我们写在dom里的到是被注释掉的dom结构，是不会被抖掉的哦，所以上线前，把注释的代码清空，也会提升性能哦~

结尾

webpack的学习还在继续~文章也会持续更新哦~若我的文章里有错误或问题，请及时联系我，v:lin2537421241

转载于:https://juejin.im/post/5c9b70eae51d453fea4a9c74

webpack学习(四) -- css tree shaking相关推荐

webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
tree shaking(摇树优化)
tree shaking(摇树优化) 前言随着js的不断发展,性能优化成了主流的方向,但是如何性能优化又成了现在程序员的一大苦恼,而我作为一名前端小白,也就深陷其中,最近学习到了tree shaki ...
Webpack进阶（一） tree shaking与不同mode
Tree Shaking 生产环境去除没有使用到的内容(开发环境没有删除,会影响调试) 只支持ESM规范(静态引入,编译时引入),不支持CJS(动态引入,执行时引入) // webpack.confi ...
Webpack 实现 Tree shaking 的前世今生
作者 | 左琳责编 | 欧阳姝黎前言如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
webpack高级应用篇（九）：tree shaking（usedExports）与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
Webpack Tree Shaking
Tree Shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code).它依赖于 ES2015 模块语法的静态结构特性, ...
Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
前端基础建设与架构11 Tree Shaking：移除 JavaScript 上下文中的未引用代码
时至今日,Tree Shaking 对于前端工程师来说,已经不是一个陌生的名词了.顾名思义:Tree Shaking 译为"摇树",它通常用于描述移除 JavaScript 上下文 ...

webpack学习(四) -- css tree shaking