开发环境性能优化
- 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中文网