Vue脚手架工程优化之源码和图片压缩--webpack配置

    在前端做加载速度优化的方案中，有一个是对源码和图片大小进行压缩。顾名思义就是将源码去掉空格、注释、换行等生产环境中的无用信息。图片在不影响效果的前提下进行压缩。从而减小图片大小，页面在加载的时候由于加载的资源较小，实现更快加载。公司的项目是通过Vue的脚手架工具搭建的。所以用到了webpack打包工具，在我未进行优化的情况下，发布的源码包大小为13.6m，进过处理之后，源码大小从原先的13.6m减小到现在的4.23m，优化前是优化后的三倍多一点，具体我们来看看是如何做到的。

    首先我们看看通过vuejs脚手架工具生成项目配置文件config/index.js文件，通过看配置我们可以看到这样一项配置，

productionSourceMap: true

这个配置的作用用于是否生成source map文件。当配置为true时，在打包的过程中会生成source map文件，从而帮助调试代码。但是在我们发布代码的时候是已经调试好的代码，所以生成source map意义不大，于是我们将此处改为false。

productionSourceMap: false,

为true时我们生成的代码目录如下图，通过下图可以看见有.map为后缀的文件。

再看看为false后生成的目录

通过设置为true和false我们可以清楚的看到生成之后的文件区别，为false时少了.map文件，而配置中默认为true，所以在打包发布时可以将此处设置为false，从而减少包的大小。我在优化的过程走到这一步，包的大小从原来的13.6减少到了8.xm。

    是否看到此处疑惑距离4.23m还有一定的距离？不要着急，下面我们来看看怎么对图片进行优化。通过webpack构建的项目，我们在页面中之所以能够正确的引用到图片，这一切都要依托于webpack中的loader，通过查看build下的webpack.base.conf.js文件我们可以看到里面配置了各种各样的loader，其中有一个url-loader，这个是我们关心的重点。先看一下优化配置部分

默认配置：

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}

修改后的配置：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),
        'image-webpack-loader'
        ]
}

通过修改后的配置和默认配置对比，我们发现修改后的url-loader少了options配置且loader的值为一个数组，而将原本配置在options中的参数以我们常见的url参数的方式配置到了url-loader后面，这个地方实际上是同样的效果。在loader中还有一个image-webpack-loader配置，这个loader就是用于图片优化的核心，用于压缩图片大小。这个地方还有个注意点就是数组中loader的顺序，即最开始的图片处理是由url-loader先处理还是image-webpack-loader处理？url-loader用于将引用的图片正确的引用，而image-webpack-loader用于压缩图片大小，我们设想的是先压缩图片大小，然后再引用。所以配置顺序是url-loader在前，image-webpack-loader在后，因为配置在后面的loader先处理，再交由配置在当前处理的loader之前的loader处理。

好了，通过这两步的优化，我就成功的将编译打包后的源码从13.6m减小到了4.23m，如果你也有同样的需求，赶紧试试吧！

注：我这里面提到的配置文件为通过vue脚手架工具生成的webpack项目，至于其他webpack项目，也是可行的，修改相应的配置即可。