webpack 优化笔记

优化能够从哪些方面入手

一、优化开发体验

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

二、优化输出质量

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

webpack 能够作哪些优化

一、缩小文件搜索范围
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 目录下，能够指明第三方模块的绝对路径，减小查找路径

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

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

构建动态连接库

引用动态连接库

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