首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现的多页面项目如何优化打包的步骤详解

Posted in Javascript onJuly 19, 2020

遇到的问题

在多页面框架打包的过程中会，随着业务的增加页面越来越多，使用的三方包也会越来越多，但并不是所有页面都会使用到三方插件，使用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$', '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
   })
 }
}

抽离第三方包后的前后对比:

抽离前

vue实现的多页面项目如何优化打包的步骤详解

抽离后

vue实现的多页面项目如何优化打包的步骤详解

使用自动注入插件前后生成的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="external nofollow" 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

Demo地址: vue-multipage

到此这篇关于vue实现的多页面项目如何优化打包的步骤详解的文章就介绍到这了,更多相关vue多页面优化打包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

vue实现的多页面项目如何优化打包的步骤详解

- Author -

dragonnahs

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJS Controller作用域
Jan 09 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
jQuery常用选择器详解
Jul 17 jQuery
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 #Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
子查询(1) nginx(76) 日志格式分析(1) Windows server 2012(17) create(1) Rewrite(4) 组策略(1)  AD域(1) destoon(1) mounted(1)
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP学习笔记之一
2011/01/17 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
在线购买世界上最好的酒：BoozeBud
2018/06/07 全球购物
SEPHORA丝芙兰捷克官网：购买香水、化妆品和护肤品
2018/11/26 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
尊老爱幼演讲稿
2014/09/04 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
会议主持人开场白台词
2015/05/28 职场文书
采购员工作总结范文
2015/08/12 职场文书
最新农村养殖致富：资金投入较低的创业项目有哪些？
2019/09/26 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
python_tkinter事件类型详情
2022/03/20 Python