1. 什么是 wenke-cssify？
wenke-cssify 是一个 npm 包，目的是将 CSS 样式文件打包到 JavaScript 文件中，使这些样式可以在浏览器中动态加载和使用。这种方式可以极大地减小文件请求的数量，提高页面加载速度，也避免了因为浏览器限制的并行请求数量而出现的加载阻塞。
2. 如何安装 wenke-cssify？
使用 npm 安装：
npm install --save-dev wenke-cssify
3. 如何使用 wenke-cssify？
将单个 CSS 文件打包到 JavaScript 中
const fs = require('fs');
const cssify = require('wenke-cssify');
const css = fs.readFileSync('styles.css', 'utf-8');
const js = cssify(css, {
varName: 'myStyles',
});
console.log(js);CSS 文件被读取，并以字符串形式传递给 cssify 函数，函数会返回一个 JavaScript 字符串，其中包含该样式文件的打包代码，可以将这个字符串写入文件中或者在脚本中动态执行。
将多个 CSS 文件打包到 JavaScript 中
如果有多个 CSS 文件需要打包，可以使用以下方法：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------ - ------------------------ ----- ------ - - ------------ ---------------------------- --------- ------------ ---------------------------- --------- -- ----- -- - -------------- - -------- ----------- --- ----------------
此时，cssObj 对象中存储了多个 CSS 文件的内容，cssify 函数会自动将它们打包为一个 JavaScript 字符串。
将打包样式动态加载到页面中
使用上述方式打包样式文件后，可以把得到的 JavaScript 字符串插入到页面中，实现动态加载：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- ----------
-------
------
---- ---------------- --- --------------
------- ----------------------------
--------
----- ----- - --------------------------------
----------------- - ---------
---------------------------------
---------
-------
-------在上述 HTML 文件中，script 标签引入了之前打包的 JavaScript 文件，通过动态创建 style 标签，将打包后的样式代码插入到页面中，从而实现动态加载。
4. wenke-cssify 总结
wenke-cssify 的使用方法简单而灵活，有助于简化前端项目构建，提高页面性能。当然，在使用时我们还需要注意打包后的 JS 文件与样式文件的加载顺序，以保证样式能够正常生效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710a8dd3466f61ffe094