webpack性能优化不彻底指北

时间 2019-11-06

原文原文链接

前语--最近公司新开了一个项目，对webpack的性能上产生了不小需求，在一通学习了webpack以后特地写一篇来总结一下。

本文涉及的内容node

体积优化

依赖按需加载
剔除没必要要的依赖

体积的大小直接关系到咱们项目的加载速度，而SPA的首屏加载速度又决定了用户的留存。对于体积优化，咱们能够从俩个方面来下手。 But 在那以前咱们要先对本身的项目依赖构成进行分析，肯定了优化的目标才能着手思考优化方案，进而实施优化方案。

对于项目bundle的分析，咱们能够借助 webpack-bundle-analyzer webpack

食用方法：git

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    plugins: [
       new BundleAnalyzerPlugin()
    ]
}复制代码

咱们只须要在每次打包的时候使用它，能够经过判断NODE_ENV === 'production' 来选择是否要开启该插件。同类型的插件还有 webpack-analyse 和 webpack-chart，更炫酷（雾）一些不过额外要配置下。运行下面的命令生成分析工具须要的json文件。github

webpack --profile --json > stats.json

// 若是，运行指定的 weboack 文件，可用此命令
webpack --config build/webpack.prod.conf.js  --profile --json > stats.json
复制代码

擒贼先擒王

有了依赖分析图，咱们就知道哪些模块是致使咱们性能存在瓶颈的罪魁祸首，必不可缺的依赖咱们能够考虑是否有按需加载的可能，没有必要或者功能重复的依赖咱们就能够将它剥离。web

① 按需加载
npm

一是将所使用的库按需加载，好比一个UI库小至100K，大至上MB。咱们一般不会使用她全部的组件而是只使用其中一部分，这时就能够将所使用的组件提取出来，而不打包没有使用到的多余组件。json

在咱们导入组件库的时候不使用--缓存

这种引入方式会致使将整个组件库都导入进来，得不偿失。bash

正确的食用方法--babel

在引入须要的组件时都只将该组件引入进来，而不使用解构。

but 这样是否是特别麻烦，每次引入文件都须要去对应的文件下面导入文件。特别是一般组件库都是咱们经过npm下载下来的，都放在node_modules下面。很是不利于咱们准确的找到须要的组件。so 咱们可使用 babel-plugin-import 来帮咱们自动完成。这样使用第一种引入方式也不会将全部的组件都导入进来。

二是将代码分块（chunk），实现代码层面上的按需加载--

使用webpack的Code splitting来实现，具体展开来说篇幅过长。直接 webpack的 Code splitting 实现按需加载。But 这是一种过期的方法-- 咱们在webpack导入对应的模块可使用ES6+的import()。将代码动态拆分。 webpack动态导入

Tips： Scope Hoisting

这个是webpack自带的一个插件，只需在配置文件中添加一个新的插件，就可让 Webpack 打包出来的代码文件更小、运行的更快。可是通过我测试效果微乎其微，选装。

webpack Scope Hoisting介绍

食用方法--

构建速度

首次编译构建速度
热重载构建速度（rebuild）

项目工程的构建速度决定咱们能不能 happy coding，长足的构建速度也能加快咱们的开发进度。在构建速度上主要分为俩个优化方面--

① 首次编译构建速度

HappyPack加速构建

总所周知，JS是单线程的，而node在不展开cluster的状况下也是默认单线程的。单线程的优点这里不详谈，happypack可让 Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。大大提高了编译的速度.

食用方法--

happypack的处理思路是将原有的webpack对loader的执行过程从单一进程的形式扩展多进程模式，本来的流程保持不变，这样能够在不修改原有配置的基础上来完成对编译过程的优化。

打包DLL抽离公共类库

经过前置依赖包使得不常更新的包不参与打包来提高构建速度，只须要build本身的业务代码。这样就能省下公共资源和公共依赖的打包时间，大大加快构建速度。

食用方法--

像是经过前置依赖和缓存依赖的方法还有 Externals， CommonsChunk。

② 热重载构建速度（rebuild）

快速的rebuild速度可以在开发中带来更多的幸福感，在这一方面咱们能够借助webpack的cache（默认开启），babel的cache，happypack的cache。

babel.cache--

使用babel将代码编译成es5的时候，可使用exclude和include限定babel和排除node_modules下的下赖来提高构建速度。

happypack.cache--

打包速度优化

若是在体积优化和构建方面都作到位了，打包时的速度其实就会很是的快乐。而咱们在打包时能作的优化其实前面都作得差很少了，

在这步最多对文件压缩（webpack-parallel-uglify-plugin）和文件搜索目录深度（resolve-modules）进行一些优化。这里就再也不过多赘述了。