webpack学习(四) -- css tree shaking

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