Webpack 有哪些性能优化手段？

[dujuanj]

1.首先优化loader,影响打包效率的babel,项目越大，转换代码越多，效率越低；优化loader文件的搜索范围，只在src文件中查找 includes:[resolve('src')],nodule_modules下的文件都是编译过的，没必要再去处理一遍； 还可以将babel编译过的文件缓存起来，下次只编译更改过的代码，可以大幅度加快打包速度； loader:"babel-loader?cacheDirectory=true" 2.webpack打包是单线程的，长时间编译的任务很多就会导致等待的时间较长。HappyPack可以将loader的同步转换为并行的； 3.webpack代码压缩，现在只要启用 mode 为production模式

[Moannas]

JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Shaking 代码分离 内联 chunk webpack对前端性能的优化，可以通过文件体积大小入手，其次还可通过分包的形式、减少http请求次数等方式，实现对前端性能的优化