Webpack 3.x 通过PurifyCSS Plugin按需加载bootstrap css样式

之前通过webpack把bootstrap css 样式引入到模板中，但是注意到的是把全部bootstrap css样式加载进来，但是当前的template中只有简单的些button/div/img/h1/等，而且这些元素只用到了一小部分样式，没有必要把全部的样式都加载进模板，所以需要改进，怎么办呢，PurifyCSS Plugin可以做到只加载当前页面所需要的样式。
先安装：

npm i -D purifycss-webpack purify-css

安装完成后当前版本是：

"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0"

接下来去webpack.config.js中去配置：

const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');

再把purifyCSSPlugin添加到plugins对象中：

new PurifyCSSPlugin({
    // Give paths to parse for rules. These should be absolute! 
    paths: glob.sync(path.join(__dirname, './src/*.html')),
}) //src目录下的所有html模板都会被影响

之前没有优化前的bootstrap.css的大小是121KB：

优化完之后是11KB：

打开之后也可以看到它里面也只包含了当前页面元素的css样式。假如现在在模板中加入一个dropdwon:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

从编译后bootstrap.css中可以看到关于dropdown的样式也被加载进来，也就是它会根据页面中实际的元素来加载相对应的css样式。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/stanxl/article/details/78647701
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 21:36:59
阅读 ( 1047 )
分类：前端

Webpack 3.x 通过PurifyCSS Plugin按需加载bootstrap css样式

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看