Webpack性能优化

开发环境性能优化

• HMR（模块热替换，它允许在运行时更新各种模块，而无需进行完全刷新。仅重新构建被更改的文件，仅使用于开发环境。）
• Source Map (用法：devtool: 'source-map'，提供多种选项，用于建立源代码和构建后的代码之间的对应关系，方便调试过程中快速定位源文件中报错的位置)
• 缓存 （hash、chunkhash、contenthash。推荐使用contenthash，它会根据文件的内容去生成哈希值，如果内容没有变化哈希值也就不会变，浏览器可以通过读取缓存加载相应的文件。
• Tree Shaking (去除没有被引用的代码，减少文件大小。通过package.json文件中设置sideEffects字段来声明那些文件是具有副作用的，不应该被删除。注：该功能仅在生产模式下起作用。)
• Code Split - 分包 (通过optimization里配置splitChunks，对不同用途的代码进行分开打包，比如多入口应用会生成不同的文件，为不是都打包到一个文件里。)
• 懒加载 （不会一次性把所有页面的资源全部download下来，而是当触发、用到哪个页面的时候再去加载它的资源）
• 预加载/预拉取 （preload：在父 chunk 加载时，以并行方式开始加载，会在父 chunk 加载结束后开始加载；prefetch：在浏览器闲置时下载。）
• 多进程打包 （通过thread-loader插件实现。打包过程用多个进程来进行，减少打包时间。注：该插件本身启动时间消耗较大，只适用于较大的项目，小的项目中使用，实际打包时间反而可能会更久。）
• externals （使插件外部化，不会被打包到统一的文件中，相当于是假设了该插件应该已经存在于某个地方，我们只需要require进来而不需要把它也打包到项目中。）
• DLL （动态链接库，DLLPlugin插件能把第三方代码完全分离开，即每次只打包项目自身的代码。）
• PWA （在离线(offline)时应用程序能够继续运行功能。主要是通过Service Worker实现的。）
• 其他 （除了以上列出的以外，还有很多很多的优化实现方案，很多插件都能起到良好的优化效果，这里就不一一列举出来了。）

webpack文档

传送门： webpak中文网