Skip to content

Commit ed3fe13

Browse files
authored
Update README.md
1 parent 359c2bd commit ed3fe13

File tree

1 file changed

+1
-1
lines changed
  • tutorials/use-extract-text-webpack-plugin

1 file changed

+1
-1
lines changed

tutorials/use-extract-text-webpack-plugin/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
我们在上一篇[《使用Webpack加载CSS、SASS、LESS资源并集成PostCSS》](https://github.com/iSpring/babel-webpack-react-redux-tutorials/blob/master/tutorials/load-css-with-webpack/README.md)中介绍了如何使用Webpack加载CSS、SASS、LESS等相关资源以及如何将PostCSS整合进入Webpack构建过程,在那篇课程中我们将CSS相关资源打包成了一个JavaScript文件`css.bundle.js`
99

1010
将多个CSS文件打包成一个JavaScript文件存在如下问题:
11-
1. 生成的`css.bundle.js`文件中存储了CSS字符串,在html页面中需要用用`<script>`标签引入该`css.bundle.js`文件,而且它会自动向该html文件中生成多个`<style>`标签,但是IE8等浏览器对document中的`<style>`标签有上线要求。所以这种自动注入`<style>`标签的方式兼容性不够,而且将CSS字符串转变成`<style>`标签也需要一定的解析执行的过程,速度有一定影响。
11+
1. 生成的`css.bundle.js`文件中存储了CSS字符串,在html页面中需要用用`<script>`标签引入该`css.bundle.js`文件,而且它会自动向该html文件中生成多个`<style>`标签,但是IE8等浏览器对document中的`<style>`标签有上限要求。所以这种自动注入`<style>`标签的方式兼容性不够,而且将CSS字符串转变成`<style>`标签也需要一定的解析执行的过程,速度有一定影响。
1212
2. 将原生的CSS文件打包成JavaScript文件时,会在生成的JavaScript文件中生成很多额外的函数用于在运行时将这些字符串注入成`<style>`标签。举例来说,一个1KB的未被压缩的CSS文件生成的对应的JavaScript文件大约有16KB,这导致了输出文件过于庞大,影响传输速度。
1313

1414
为了解决这两个问题,本文将介绍如何从JavaScript文件中分离出多有CSS资源并将这些CSS资源打包成一个CSS文件。

0 commit comments

Comments
 (0)