共计 852 个字符，预计需要花费 3 分钟才能阅读完成。
背景
- 目前的 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 注意事项
正文完