性能优化之webpack层

时间:2021-03-03 01:15:48

优化瓶颈:打包构建过程太浪费时间;打包结果体积太大

一、尽量与时俱进

如果想要提高webpack的打包速度,我们可以首先选择升级webpack的版本、nodejs的版本及yarn或npm包管理工具的版本。

因此在项目中尽可能使用最新稳定版本的webpack、nodejs、npm或yarn能有效地提升打包构建的效率。

二、减少loader的执行

根据具体情况使用include或exclude,在尽可能少的模块上执行Loader。

rules:[
    {
        test:/\.js$/,
        exclude:/node_modules/,//针对node_modules文件路径之外的js文件
        use:[{loader:'babel-loader'}]
    }
]

同时与之对应的还有一个include字段,其使用含义与exclude相反,即仅对其指定范围内的JavaScript文件进行处理,以降低loader被执行的频率。

注意:使用exclude或include可以帮助我们规避对庞大的第三方库文件的处理,但仅通过限定文件处理范围所带来的性能提升其实是有限的,除此之外,如果开启缓存将构建结果缓存到文件系统中,则可让babel-loader的工作效率得到成倍增加,处理方式也很简单,只需为loader增加相应的参数即可

总结:

1、使用include或exclude

2、开启缓存

三、确保插件的精简和可靠

根据前端代码的执行环境是线上环境还是开发环境来规定不同的webpack配置内容,比如在线上环境中,我们希望打包后的代码尺寸尽可能小,用户加载的速度尽可能快,所以就需要对代码进行压缩,下面的配置项声明使用OptimizeCSSAssetsPlugin插件来压缩CSS资源文件。

如果在开发环境下,由于不需要考虑代码对用户的加载速率,并且压缩了反而会降低代码的可读性,增加开发成本,所以在开发环境下不用引入代码压缩插件。

四、合理配置resolve参数

配置resolve参数可以为我们在编写代码引入模块时提供不少便利,比如使用extensions省略引入JavaScript文件的后缀,使用alias减少书写所引入模块的多目录层级,使用mainFiles声明目录下的默认使用文件等,如果滥加使用也会降低打包速度。

五、使用DllPlugin

我们仅需要在第一次打包时去分析这些第三方库,而在之后的打包过程中只需使用之前的结果即可

六、单线程转化为多进程

但好在大多数CPU已经都是多核的了,我们可以使用happypack充分释放CPU在多核并发方面的优势,帮助我们把打包构建任务分解成多个子任务去并发执行,这将大大提高打包的效率。其使用方法也很简单,就是将原有的loader配置转移到happypack中去处理

七、压缩打包结果的体积

1、删除冗余代码,tree-shaking,比如console语句、注释、多余空格等,uglifyjs-webpack-plugin

2、代码拆分按需加载,根据路由划分打包文件,路由懒加载

3、可视化分析,webpack-bundle-analyzer,它的分析结果会生成一个文件大小图