本次课程的代码目录(如下图所示):
什么是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);
最后,为了让环境更接近实际环境,我们在的一个标签,也引用了定义好的 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 文件中。文件内容如下图所示(肯定好多朋友懒得手动打包):
我们在 和 src/app.js 中引用的样式都被打包了,而没有被使用的样式类--box-small,就没有出现在图片中。成功!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论