前语--最近公司新开了一个项目,对webpack的性能上产生了不小需求,在一通学习了webpack之后特意写一篇来总结一下。
本文涉及的内容
体积优化
- 依赖按需加载
- 剔除不必要的依赖
对于项目bundle的分析,我们可以借助 webpack-bundle-analyzer
食用方法:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
我们只需要在每次打包的时候使用它,可以通过判断NODE_ENV === 'production' 来选择是否要开启该插件。同类型的插件还有 webpack-analyse 和 webpack-chart, 更炫酷(雾)一些不过额外要配置下。运行下面的命令生成分析工具需要的json文件。
webpack --profile --json > stats.json
// 如果,运行指定的 weboack 文件,可用此命令
webpack --config build/webpack.prod.conf.js --profile --json > stats.json
擒贼先擒王
有了依赖分析图,我们就知道哪些模块是导致我们性能存在瓶颈的罪魁祸首,必不可缺的依赖我们可以考虑是否有按需加载的可能, 没有必要或者功能重复的依赖我们就可以将它剥离。
① 按需加载
一是将所使用的库按需加载,比如一个UI库小至100K,大至上MB。我们通常不会使用她所有的组件而是只使用其中一部分,这时就可以将所使用的组件提取出来,而不打包没有使用到的多余组件。
在我们导入组件库的时候不使用--
这种引入方式会导致将整个组件库都导入进来,得不偿失。
正确的食用方法--
在引入需要的组件时都只将该组件引入进来,而不使用解构。
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 打包出来的代码文件更小、运行的更快。 但是经过我测试效果微乎其微,选装。
食用方法--
构建速度
- 首次编译构建速度
- 热重载构建速度(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)进行一些优化。这里就不再过多赘述了。