webpack优化

155 阅读1分钟

TODO 还是要补充

运行时优化

量化打包分析的插件:speed-measure-webpack-plugin。可以分析每一个loader、plugin使用了多少时间。同时loader输出了多少个module

  • 缩小转译范围:exclude/include
  • 缓存技术:cache-loader
  • 并行处理:happypack TODO,还有什么?

提高页面性能优化

  • 压缩代码:删除多余的代码、注释、简化代码的写法灯。可以利用webpack的UglifyJsPlugin(丑化)和ParallelUglifyPlugin来压缩JS文件。利用cssnano来压缩css
  • 利用CDN加速:在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
  • Tree shaking:将代码中永远不会走到的片段删除,可以通过webpack启动时追加 --optimize-minimize来实现
  • Code Splitting:将代码按路由维度或者组建分块(chunk),这样做到按需加载,同时可以充分利用浏览器缓存
  • 提取公共第三方库:SplitChunksPlugin插件来进行公共模块抽取,利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码