【前端卡顿的优化思路和方案01】webpack从2.2.1升级到webpack4全纪录(目前先升级到webpack3.8.1)

背景

  • 目前的webpack的版本是 2.2.1,而webpack目前的最新版本已经更新到了4.39.3

直接需求

  • 前端页面比较卡顿
原因1
  • 文件都是采用的require的按需加载的模式,点击到大文件的时候,加载时间较长。某个页面要加载的js文件2.4m,需要2-3秒才能加载完
原因2
  • 首页内容过多,会发出许多http请求,如果此时点击其他页面,会导致请求进入了排队队列,要等到首页的请求完成才能开始。比如点进去首页直接点击某个顶部菜单栏页面,Queueing 的时间长达 6.77 s,之后才开始发送当前页面的请求。而总共的加载时间只有7.10 s

解决办法

原因1
  • 方法1:采用 prefetch 预加载,在首页空闲时间就开始加载后续其他页面的文件。
  • 方法2:后端nginx做代码压缩,可以把2.4m的文件压缩到300k左右。
原因2
  • 针对首页的请求过多,可以对诸如滚动新闻栏的信息,做滚动懒加载,避免首页处理过多的请求。

目前的优化开发计划

  • 解决 原因1 中的 方法1
  • 采用 preload-webpack-plugin 这个插件
  • 官方文档
var PreloadWebpackPlugin = require('preload-webpack-plugin');
// rel 可选 'prefetch' / 'preload'
// include 会匹配有按照这个字段命名的 打包文件
...
new PreloadWebpackPlugin({
      rel: 'prefetch',
      include: 'Flow'
    }),
  • 关于预加载的 preload 和 prefetch
  • 实际上,webpack4 就能够直接设置预加载及给预加载排序,下一步升级到webpack4后会做此优化。参考文档

引发的开发需求

  • 因为命名 chunk,要使用一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。所以要进行webpack升级,第一步是先升级到 webpack 3.8.1
  • 相关文档

    • 【前端卡顿的优化思路和方案02】实现webpack的chunk文件的命名
    • 【前端卡顿的优化思路和方案03】升级babel7注意事项

你可能感兴趣的:(babel,webpack,优化,vue.js,javascript)