关注前端 | 前端博客
当前位置: webpack打包优化

webpack打包优化

2018年03月05日 管理员 258次浏览

webpack打包优化

随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大。最糟糕的是单页面应用首页白屏时间长,用户体验差。

优化的期望

  • 优化的目标是什么?
  • 有哪些点可以进行优化?如何优化?

优化的目的

优化的最终目的是提高页面加载速度,提高产品用户体验

  • 减小打包后的文件大小
  • 首页按需引入文件,减少白屏时间
  • 优化 webpack 打包时间

如何优化

  • 按需加载
  • 路由组件按需加载
  • 第三方组件和插件,按需加载需引入第三方组件
  • 对于一些插件,如果只是在个别组件中用的到,也可以不要在 main.js 里面引入,而是在组件中按需引入
  • 优化 loader 配置
  • 优化正则匹配——减少文件查询时间
  • 通过cacheDirectory选项开启缓存——减少再次打包时间
  • 通过 include、exclude 来减少被处理的文件。(注意:保存和读取这些缓存文件会有一些时间开销,所以请只对性能开销较大的 loader 使用此 loader。)
  • 优化文件路径——省下搜索文件的时间
  • extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。
  • alias 通过配置别名可以加快 webpack 查找模块的速度。
  • module.noParse:让 webpack 忽略对部分没采用模块化的文件的递归解析处理,这样做的好处是能提高构建性能。因为如 jQuery 、echart 等库庞大又没有采用模块化标准,让 webpack 去解析这些文件耗时又没有意义。
  • 生产环境关闭 sourceMap
  • sourceMap 本质上是一种映射关系,打包出来的 js 文件中的代码可以映射到代码文件的具体位置,这种映射关系会帮助我们直接找到在源代码中的错误。
  • 打包速度减慢,生产文件变大,所以开发环境使用 sourceMap,生产环境则关闭。
  • 代码压缩

uglifyJsPlugin 是 vue-cli 默认使用的压缩代码方式,用来对js文件进行压缩,从而减小js文件的大小,加速load速度。它使用的是单线程压缩代码,打包时间较慢,所以可以在开发环境将其关闭,生产环境部署时再把它打开。

ParallelUglifyPlugin 开启多个子进程,把对多个文件压缩的工作分别给多个子进程去完成,每个子进程其实还是通过 UglifyJS 去压缩代码,但是变成了并行执行。

ParallelUglifyPlugin 还可以缓存压缩后的结果,下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回。

  • 提取公共代码

在用 webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,vue 我们希望能和自己的代码分离开,这样既能减小打包的总体积,也能避免单个包体积过大。

  • CommonsChunkPlugin 及 splitChunks
  • DLLPlugin
  • CDN 优化

  • 多进程解析和处理文件

  • thread loader
  • HappyPack (注意,当项目较小时,多线程打包反而会使打包速度变慢。*~~~~*)

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 1 ) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:没有了,已经是最后文章

下一篇:

共有 0 条评论 - webpack打包优化

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线