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