写点什么

手写一个 webpack 插件

作者:Geek_02d948
  • 2022-11-16
    浙江
  • 本文字数:2597 字

    阅读完需:约 9 分钟

前言

前端性能优化是一个老生常谈的话题,关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容,有以下推荐


  • 雅虎军规 35 条

  • 某东上搜“前端性能优化”,书籍也特别多。但是前端性能优化做的所有工作,都和一个灵魂拷问有极大的关系:在浏览器输入 url 后,发生了什么?

  • 首先 url 是一个域名,首先它要被解析成 ip 地址。如果你的设备之前访问过该 url,那么本地可能会缓存 ip 地址。如果没有缓存过,那么就向 dns 服务器进行解析。

  • 根据 IP 地址和默认端口建立 TCP 连接,三次握手。

  • 浏览器发出 HTTP 请求;

  • 服务器对请求作出响应;此时也许会有一些 304 之类的返回结果。会涉及到 http 缓存机制。

  • 释放 TCP 连接;

  • 浏览器将该 html 文本并显示内容。


所以我们可以从这个过程里去思考,服务器如何把文件尽快发送到客户浏览器。


  • 第一点,就是文件尽可能要小,文件尽可能少,发送起来会更快

  • 第二点,就是发送过程,在一定条件下,减少文件或请求的个数。文件也并不是越少越好,假设文件内容少到极致,内容全部合并到一个文件,那么这个文件会是非常巨大的,发送起来也会非常慢。如果文件个数太多,那么浏览器也会限制并发数量,在同一个域名下,浏览器的并发数量是 6 个。这样,虽然每个请求发送的文件很少,但是建立请求的过程也是耗时间的。很多请求都被阻塞了。以上是针对第一次访问网站时可用的方案,但是如果一个网站经常被重复访问,还有以下方法

  • 第三点,缓存机制 就是之前用到过的文件和内容,如果没有失效,就可以重复使用,不需要再从服务器拿。


以上是我大概能想到的一些思路。如果有不准确的地方,或者有其他好的思路,希望大家留言帮我补充。


下面我们进入正题,说一下我在开发项目时遇到的一个问题,以及解决思路

开发过程遇到的一个实际问题

在 vue 项目打包后,会在项目的根目录下生成一个 dist(你也可以改变该名称)文件夹。一个单页面应用的 dist 文件夹通常包含一个 index.html 和 一个 js 文件夹 和一些其他资源文件。


然后我们把 dist 文件夹发布到服务器上,在浏览器上去访问我们的项目,刚开始可能会特别慢。打开 chrome 调试工具,查看一下资源加载情况。



太惊人了,一个关键的 js 文件,在 nginx 服务器上已经做了压缩处理,从 800k 压缩到 270k 左右。但是加载时间依然达到了惊人的 22.89s。这个对于任何一个项目来说都是不可接受的。

初步解决思路

问题已经呈现了。打包后的文件,出现了特别大的 js,而且就是这个 js 文件阻塞了整个项目的加载。由于最近正在研究 webpack 相关内容。webpack 大家应该都使用过。webpack 是一个打包编译工具,它做的事情,就是把你开发的整个项目,编译成一个浏览器可直接识别的项目。它包含以下一些基础概念:


  • 1,入口文件入口文件,就是 webpack 工作的起点,从入口文件开始,我们通常会 import 很多其他模块,import 等模块化的开发方法,就把整个项目给串联起来了。根据这些依赖信息,webpack 把整个项目解析为一个 ast(抽象语法树),这个树记载了所有的文件依赖路径。

  • 2,出口文件就是项目打包后存放的目录,所有资源文件都会输出到这个文件夹

  • 3,loaderwebpack 只能识别 es5 的语法,对于 es6 等更新的语法,是不能识别的,对于一些图片,css 文件,jsx 文件等各种不同后缀名的文件,都是需要 loader 进行解析的。loader 做的事情也就是这些。

  • 4,plugin 根据 webpack 官网文档,我们知道 webpack 在整个打包和编译的过程中,有几十个时间节点。详细的内容可以看这个链接,在 plugins 目录下: webpack.docschina.org/api/compile…


那么我做的一点小尝试,就是在文件打包并且输入到 output 文件夹后,找到关键的 js 文件(上图划红线的那个文件),上传到公司的阿里云 oss。然后 index.html 文件原本是引用了 output 里面的 js 文件,改为引用 oss 里面的链接。这也是待会儿实现 webpack 自定义插件的主要思路。

最后的实验效果

原本需要 20 多秒加载的文件,放到阿里云 oss 后,只需要 0.5s 的加载速度,是不是非常惊人呢。然后发现,影响页面加载的主要因素,已经不是这个关键 js 了。我们好可以在此基础基础上做其他优化。

插件代码 和 使用方法

先看主要代码:在 src 目录下新建 plugins 文件夹,然后新建了一个 UploadJsToCDNPlugin.js 文件。这也是我们的插件文件。##### 参考 webpack 视频讲解:进入学习



src/plugins/UploadJsToCDNPlugin.js 文件内容如下:


// const globby = require('globby');const path = require('path');const fs = require('fs');const axios = require('axios')var FormData = require('form-data')

let replaceFile = function(filePath,sourceRegx,targetStr){ fs.readFile(filePath,function(err,data){ if(err){ return err; } let str = data.toString(); str = str.replace(sourceRegx,targetStr); fs.writeFile(filePath, str, function (err) { if (err) return err; }); });}
class UploadJsToCDNPlugin { constructor(options = {}) { this.options = options; }
apply(compiler) { console.log(compiler.options.mode) compiler.hooks.afterEmit.tap('UploadJsToCDNPlugin', async (params) => { try {
const js_path = Object.keys(params.assets).find(item => item.includes('js/chunk-libs.'))// 请自行调整文件名称 const html_path = path.resolve(compiler.options.output.path, 'index.html')
const file_path = path.resolve(compiler.options.output.path, js_path)
// 由于是公司项目,已做脱敏处理,抱歉 const url = 'https://wwwxxxxxx/file/upload'
const form = FormData() form.append('file', fs.createReadStream(file_path), { filename: 'app.js' })
const res = await axios.create({ headers: form.getHeaders() }) .post(url,form)
const cdn_path = res.data.data
// 这行代码是本插件的核心代码 await replaceFile(html_path, /js\/chunk-libs.\w*.js/g, cdn_path)// 请自行调整文件名称 } catch (e) { e } }) }}
module.exports = UploadJsToCDNPlugin;
复制代码


最后在 vue.config.js 里面使用 webpack 自定义 webpack 插件:vue.config.js 文件开头:


const UploadJsToCDNPlugin = require('./src/plugins/UploadJsToCDNPlugin')
复制代码


用户头像

Geek_02d948

关注

还未添加个人签名 2022-09-08 加入

还未添加个人简介

评论

发布
暂无评论
手写一个webpack插件_webpack_Geek_02d948_InfoQ写作社区