网站首页 > 博客文章 正文
作者：dragonnahs
转发链接：https://segmentfault.com/a/1190000023289245
遇到的问题
在多页面框架打包的过程中会，随着业务的增加页面越来越多，使用的三方包也会越来越多，但并不是所有页面都会使用到三方插件，使用webpack打包会让所有的三方包打包到一起，会导致vendor.js(三方包打包后的文件)越来越大，即使没使用过三方插件的页面也会引入，页面加载会越来越慢.
如何优化
- 使用cdn引入，这种就每次新建一个页面的时候手动通过cdn的方式引入，但是并不是特别好的方式，还需要手动加入.
- 就是使用splitChunks分割三方包，将三方包单独打包出来，根据页面的依赖情况自动注入，但是这种情况分离的三方包并不会自动注入到对应的页面中去,所以就写了个自动注入的插件，原理就是在html页面生成之后，根据页面所依赖的chunks找到对应的静态资源，然后将得到的静态资源注入到页面中去。
自定义webpack插件
webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。
webpack本身引入的有tapable插件来管理构建流程，在编译的时候会触发tapalbe的钩子事件，我们编写一个webpack插件就是找到对应的钩子，然后写入自己的业务，就是在钩子上注册自己的事件，和发布订阅模式是一样的，当webpack构建时插件注册的事件就会在钩子触发的时候执行。
每个 Webpack 插件都需要向外暴露一个 apply(compiler) 方法，在compiler上找到对应的钩子写入自己的业务处理。目前这个插件处理的就是在生成了html页面之后把页面对应的js和css插入到html代码中,因此这个插件是依赖于html-webpack-plugin的，他会向complation中再注入一个钩子htmlWebpackPluginAfterHtmlProcessing当该钩子触发时，已经生成了一个html页面
compiler.hooks.compilation.tap(
this.constructor.name,
compilation => {
let hook = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing;
hook.tapAsync(
this.constructor.name,
(htmlPluginData, callback) => {
try {
// 当htmlWebpackPluginAfterHtmlProcessing钩子触发后会调用addLinks方法，传入compilation和当前当html页面信息
callback(null, this.addLinks(compilation, htmlPluginData));
} catch (error) {
callback(error);
}
}
);
}
);
// 将页面所依赖的js和css注入到页面中
addLinks(compilation, htmlPluginData){
// 获取当前页面所依赖的chunk
const extractedChunks = extractChunks({
compilation,
optionsInclude: Object.keys(htmlPluginData.assets.chunks),
});
...
// 获取所有chunks的files
const allFiles = extractedChunks.reduce((accumulated, chunk) => {
return accumulated.concat(chunk.files);
}, []);
// 这一步是将根据allFiles处理后的链接注入到html页面
htmlPluginData.html = insertLinksIntoHtml({
links,
html: htmlPluginData.html,
});
return htmlPluginData;
}
具体例子如下:
// vue.config.js
const { resolve } = require('path')
const getEntries = require('./build/getEntries')
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer')
const AutoInjectPlugin = require('auto-inject-plugin')
const pages = getEntries(resolve(__dirname, 'src/features/*/index.js'))
module.exports = {
pages,
productionSourceMap: false,
assetsDir: 'static',
publicPath: '/',
chainWebpack: config => {
config.resolve.alias.set('vue#39;, 'vue/dist/vue.esm.js')
if(process.env.NODE_ENV === 'production'){
// 分离第三方包
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial'
},
elementUI: {
name: 'chunk-elementUI',
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
},
swiper: {
name: 'chunk-swiper',
priority: 20,
test: /[\\/]node_modules[\\/]_?swiper(.*)/,
}
}
})
// 将依赖自动注入到对应页面中
config.plugin('AutoInjectPlugin').use(AutoInjectPlugin)
config.optimization.runtimeChunk({name: 'manifest'})
}
if(process.env.npm_config_report){
config.plugin('analyzer').use(WebpackBundleAnalyzer.BundleAnalyzerPlugin)
}
config
.plugin('copy')
.tap(args => {
const { toType } = args[0][0]
args[0] = []
args[0].push({
from: resolve(__dirname, 'public'),
to: resolve(__dirname, 'dist/static/js'),
toType
})
return args
})
}
}抽离第三方包后的前后对比:
抽离前
抽离后
使用自动注入插件前后生成的html页面:使用前：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Document</title>
<link href=/bk_static/css/chunk-elementUI.ad4ace96.css rel=preload as=style>
<link href=/bk_static/css/home.340fe3f2.css rel=preload as=style>
<link href=/bk_static/js/chunk-elementUI.1ea80d29.js rel=preload as=script>
<link href=/bk_static/js/chunk-libs.89fd9e1d.js rel=preload as=script>
<link href=/bk_static/js/home.12708c2b.js rel=preload as=script>
<link href=/bk_static/js/manifest.1dcac3f8.js rel=preload as=script>
<link href=/bk_static/css/home.340fe3f2.css rel=stylesheet>
</head>
<body>
<div id=root></div>
<script src=/bk_static/js/home.12708c2b.js></script>
</body>
</html>
所依赖的代码并未自动引入进来
使用后：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Document</title>
<link href=/bk_static/css/chunk-elementUI.ad4ace96.css rel=preload as=style>
<link href=/bk_static/css/home.340fe3f2.css rel=preload as=style>
<link href=/bk_static/js/chunk-elementUI.1ea80d29.js rel=preload as=script>
<link href=/bk_static/js/chunk-libs.89fd9e1d.js rel=preload as=script>
<link href=/bk_static/js/home.aa83744c.js rel=preload as=script>
<link href=/bk_static/js/manifest.1dcac3f8.js rel=preload as=script>
<link href=/bk_static/css/home.340fe3f2.css rel=stylesheet>
<link href="/bk_static/css/chunk-elementUI.ad4ace96.css" rel=stylesheet>
</head>
<body>
<div id=root></div>
<script src=/bk_static/js/home.aa83744c.js></script>
<script src=/bk_static/js/chunk-elementUI.1ea80d29.js></script>
<script src=/bk_static/js/chunk-libs.89fd9e1d.js></script>
<script src=/bk_static/js/manifest.1dcac3f8.js></script>
</body>
</html>所依赖的代码已经自动注入html页面中.
auto-inject-plugin插件地址：https://github.com/dragonnahs/auto-inject-plugin
Demo vue-multipage地址:https://github.com/dragonnahs/vue_multipage_build_optimize
推荐Vue学习资料文章：
《前后端分离 Vue + NodeJS(Koa) + MongoDB实践 》
《Vue3全家桶 + Vite + TS + TSX尝鲜，先人一步 》
《细聊single-spa + vue来实现前端微服务项目》
《细聊Single-Spa + Vue Cli 微前端落地指南「实践」》
《一文带你搞懂vue/react应用中实现ssr(服务端渲染)》
《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（上）》
《教你Vue3 Compiler 优化细节，如何手写高性能渲染函数（下）》
《Deno将停止使用TypeScript，并公布五项具体理由》
《为什么Vue3.0不再使用defineProperty实现数据监听？》
《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《Vue仿蘑菇街商城项目（vue+koa+mongodb）》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》
《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
作者：dragonnahs
转发链接：https://segmentfault.com/a/1190000023289245
猜你喜欢
- 2024-11-23 uni-app使用经验—vue页面和html页面如何互相调用接口并传参
- 2024-11-23 vite还没发release版就已经火得不行了
- 2024-11-23 记一次系统演变过程
- 2024-11-23 「融职培训」Web前端学习 第7章 Vue基础教程10 路由
- 2024-11-23 39、Vue-router 是干什么的，原理是什么?(必会)
- 2024-11-23 vue3-使用 Vue 的多种方式
- 2024-11-23 Vue全家桶-使用总结
- 2024-11-23 前端笔记-vuex
- 2024-11-23 vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比
- 2024-11-23 Vue.js—实现前后端分离架构中前端页面搭建(二)
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论，来添加一个吧(●'◡'●)