css 实现app图标样式_前端性能优化之图标懒加载与首屏图标

在前端性能优化中我们总是避不开懒加载与首屏这两个概念，下面以一个图标组件为例，看看如何实现懒加载和首屏加载众多的svg文件。

Icon组件

Icon组件很简单，根据传入的图标名构造一个className，我们之后会给这个className设置背景：

import 

最终我们会借助借助webpack的loader实现自动创建这样一个包含所有图标样式的样式文件，不过我们先看看如果不借助loader要怎么做。

假设我们的icons目录下有很多图标，而且还根据项目进行了分类，现在我们必须手动引入图标：

|--icons
    |-- firstSreen
        |-- edit.svg
        |-- back.svg
        |-- next.svg
        |-- upward.svg
        |-- down.svg
        |-- close.svg
        |-- home.svg
        |-- index.less
    |-- project1
        |-- firstScreen
       	    |-- logo_project_1.svg
            |-- index.less
        |-- other.svg
        |-- index.less
    |-- project2
    	|-- firstScreen
            |-- logo_project_2.svg
            |-- index.less
        |-- more.svg
        |-- index.less
    |-- arrow_down.svg
    |-- arrow_up.svg
    |-- index.less

可以看到在每个目录下都有一个index.less文件，用来引入同级目录下的图标，这样的好处在于需要哪个目录下的图标就引入哪个目录下的样式文件，把文件体积控制到最小。

以icons目录下的index.less为例：

.

以及`icons/firstScreen`中的`index.less`：

.

接下来我们修改webpack配置，实现首屏的图标以base64格式打包到主chunk中，非首屏的生成单独的文件，需要时再请求。

module

这个时候打包，就可以看到类似于下面的结果：

我们看到，icons目录下的两个图标已经独立生成了，firstScreen文件夹内的图标则以base64形式保存到了main.css中：

现在我们已经完成首屏和懒加载图标的打包处理了。不过我们还可以进一步优化，手动的问题在于每添加一个图标就得在index.less文件中添加对应的css样式，这是一个机械重复的动作，所以我们可以让webpack来帮助我们，我们让它自动写入样式。

webpack Loader

webpack只能理解JavaScript和JSON，所以在打包之前需要用特定的loader去转换源内容，因此我们可以在这个阶段处理源内容，写入我们的图标样式。为了方便识别我们这几个index.less文件，我们需要在引用的时候加个参数：

import 

在这里使用了iconImport标记，待会我们根据这个标记判定是否要为这个文件写入目录写所有图标的样式。这里只引入了公共部分的图标，如果还有其他项目独属的图标，比如上面的project1，按一样的方式引入即可。接下来我们写一个loader处理对应的文件：

const 

在这个loader里，我们只要处理符合条件的文件，其他的一概原样返回。我们的条件是有参数且为iconImport，如果满足条件，我们会读取当前处理文件的同级目录下所有的文件，把相应的css样式加入源内容中。最后加入我们写的loader就完成了：

module

现在打包一次，可以发现结果是一样的，我们这次的优化就完成了。以后要新增图标，只要放到对应的目录里就可以生效，无需额外的配置。

对于图片等其他静态资源也可以使用类似的方式处理，原理就是打包的时候按照不同的规则，一些打包到主chunk上，另一些则生成独立的文件。