webpack 优化笔记

优化可以从哪些方面入手

1、优化开发体验

• 优化构建速度，项目庞大时构建的耗时比较久
• 优化使用体验，通过自动化手段完成一些重复工作

2、优化输出质量

• 减少用户感知到的加载时间，即首屏加载时间
• 提升流畅度，即提升代码性能

webpack 可以做哪些优化

1、缩小文件搜索范围
webpack 在启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归解析，在遇到导入语句时，webpack 会做一下操作

• 寻找对应的导入文件
• 使用配置中的 Loader 去处理文件，例如解析 js 文件用的 babel-loader

1.1 优化 Loader配置
可通过 test, include,exclude 三个配置进行优化

关于 babel-loader cacheDirectory 的配置，可参考
https://webpack.docschina.org...

1.2 优化 resolve.modules 配置
webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，resolve 配置 webpack 如何寻找模块对应的文件。resolve.modules 的默认值是 ['node_modules'], 指先去当前目录的./node_modules 目录下找对应的模块，如果没有找到，就去上一级目录../node_modules, 层层往上找。一般我们安装的第三方目录都会放在项目的根目录 ./node_modules 目录下，可以指明第三方模块的绝对路径，减少查找路径

2、使用CommonsChunkPlugin分割代码
对于多入口，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用，不需要每次访问一个新页面时，再去加载一个更大的文件

3、使用动态链接库文件
将网页依赖的基础模块抽离出来，打包到一个单独的动态链接库中，一个动态链接库可以包含多个模块；
当需要导入的模块存在于某个动态链接库时，这个模块不会被再次打包，而是去动态链接库中获取

构建动态链接库

引用动态链接库

4、使用Happypack
由于 JavaScript 是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。HappyPack 能让 Webpack 同时间做多件事，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。