前端卡顿的优化思路和方案01webpack从221升级到webpack4全纪录目前先升级到webpack381

背景

• 目前的 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 注意事项