持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情juejin.cn/post/714765… 今天学习了源于webpack的一些性能优化，进行了一些总结。不过有的目前我也还不太明白。希望对小伙伴们有一些帮助
如何⽤webpack来优化前端性能？
⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。
- 压缩代码：我们可以删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤
webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS⽂件， 利⽤cssnano （css-loader?minimize）来压缩css - 利⽤ CDN 加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤
webpack对于output参数和各loader的publicPath参数来修改资源路径 - Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动
webpack时追加参数 --optimize-minimize来实现 - Code Splitting: 将代码按路由维度或者组件分块
(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存 - 提取公共第三⽅库:
SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码
如何提⾼webpack的打包速度 ?
happypack: 利⽤进程并⾏编译loader,利⽤缓存来使得rebuild更快,遗憾的是作者表示已经不会继续开发此项⽬,类似的替代者是thread-loader- 外部扩展(
externals): 将不怎么需要更新的第三⽅库脱离webpack打包，不被打⼊bundle中，从⽽减少打包时间，⽐如jQuery⽤script标签引⼊ dll: 采⽤webpack的DllPlugin和DllReferencePlugin引⼊dll，让⼀些基本不会改动的代码先打包成静态资源，避免反复编译浪费时间- 利⽤缓存:
webpack.cache、babel-loader.cacheDirectory、HappyPack.cache都可以利⽤缓存提⾼rebuild效率缩⼩⽂件搜索范围: ⽐如babel-loader插件,如果你的⽂件仅存在于src中,那么可以include: path.resolve(__dirname,'src'),当然绝⼤多数情况下这种操作的提升有限，除⾮不⼩⼼build了node_modules⽂件。 ** 以上是我对webpack的一些简单的优化总结**
