vue webpack打包优化操作技巧


Posted in Javascript onFebruary 22, 2018

临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题!

webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便。

  webapck 把所有的静态资源都看做是一个 module,通过 webpack,将这些 module 组成到一个 bundle 中去,从而实现在页面上引入一个 bundle.js,来实现所有静态资源的加载。

话不多说,直接开始正文吧

先给大家看一下项目的目录结构:

vue webpack打包优化操作技巧 

就是正常的项目结构,简单说一下吧:

  • build文件夹包含的是一些打包配置的一下东西
  • config文件夹是项目的基础配置
  • dist是打包之后的文件
  • node_modules是项目的依赖包
  • src文件夹里面是项目的源码
  • static文件夹里面放的是一些项目使用的静态资源
  • index.html是项目的首页
  • package.json文件是项目的配置json
  • yarn.lock是使用yarn锁定项目用的依赖

优化思路

项目打包时间长,原因无外乎就是项目整体比较庞大、依赖复杂、组件之前拆分不够合理。

对于这三个问题呢,我们可以针对下面这几个方面去做一下处理:

  • 对项目进行路由屏蔽,只打包自己需要打包的部分(我司就是好几个项目合并在了一起,至于原因则是 需求类似,所以放在一起比较省事 -_-||| 开发过程中是省了不少事,但是现在一样要还的!!!!)
  • 依赖关系复杂,这里说的是项目中的依赖模块比较多,像我们现在这个项目,光算依赖包的话就有40+,另外一个重要原因就是组件之间存在相同引用的依赖。解决思路是把项目中重用的依赖抽离出来进行单独打包。
  • 组件在写的过程中,需要考虑好这个组件的使用方向,以及实现功能,不能混为一谈。

实际操作

有了整体的思路,那么开搞就可以啦 去webpack文档去看了一下有一个DllPlugin,这个插件就是帮助我们解决问题的关键,下面是我webpack.dll.config的代码:

var path = require("path");
var webpack = require("webpack");
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
module.exports = {
 // 你想要打包的模块的数组
 entry: {
 vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'iview', 'element-ui',
  'echarts','xlsx','jquery','vue-fullcalendar','vue-cookie','handsontable']
 },
 output: {
 path: path.join(__dirname, '../dist/vendor-dll-js'), // 打包后文件输出的位置
 filename: '[name].dll.js',
 library: '[name]_library'
 // vendor.dll.js中暴露出的全局变量名。
 // 主要是给DllPlugin中的name使用,
 // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
 }
 },
 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, '.', '[name]-manifest.json'),
  name: '[name]_library',
  context: __dirname
 }),
 // 压缩打包的文件,与该文章主线无关
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
};

我们需要将项目中具有重用性的包抽离出来,放在vendor数组里面,然后在下面output里面定义一下打包输出的文件路径,然后在resolve里面配置解析参数,最后定义使用的DllPlugin插件,UglifyJsPlugin是压缩js的插件

Dllplugin里的path,会输出一个vendor-manifest.json,这是用来做关联id的,打包的时候不会打包进去,所以不用放到static里 然后运行一下 webpack -p --progress --config build/webpack.dll.conf.js

成功以后,static下会有dll.vendor.js,根目录下会有vendor.manifest.json 各自打开看一下,就会看到依赖库的源码和匹配id

ok,到这里,抽离依赖库的事情就完成了,那么接下来问题就是怎么引用呢,怎么在dev和build跑呢?

这里补了一点dll和commonsChunk概念上的区别,commonsChunk之所以慢和大,是因为每次run的时候,都会去做一次打包,而实际上我们不会一直去更新我们引用的依赖库,所以dll的做法就等于是,事先先打包好依赖库,然后只对每次都修改的js做打包。

继续上面的步骤,我们需要根据生成的json文件去修改webpack.base.config文件:

const manifest = require('../vendor-manifest.json')
......
plugins: [
 new webpack.DllReferencePlugin({
  manifest
 })
 ]

然后打开index.html,在底部加上 <script src="./static/dll.vendor.js"></script>

执行一下 npm run build ,一起正常的话,表示你的操作是正确的。

升级处理

至此优化的问题基本已经解决了,但是在处理过程中需要进行复制粘贴,还要对index.html文件进行操作,如果是对于项目不熟悉的人来进行开发项目的话,就会出现一些小的问题,所以我决定继续往下研究一下:

思路还是上面的思路,我们下面需要进行的操作呢就是对与之前的处理进行优化,通过配置文件,和命令去实现我们想要的效果

首先我们将上面 webpack.dll.config 文件里面的entry配置项拿出来,在config文件夹下新建一个dll.js

module.exports = {
 entry: {
 // 这里的依赖顺序必须是:对象从上往下依赖,数组从右到左依赖(如果互不依赖的可以忽略顺序)
 ui: ['iview', 'element-ui'],
 tool: ['lodash', 'jquery', 'axios', 'vue-fullcalendar'],
 vue: ['vue', 'vuex', 'vue-router', 'vue-cookie'],
 xlsx: ['xlsx'],
 echarts: ['echarts'],
 other: ['handsontable'],
 },
 outFile: '../static/dll'
};

这里面其实就是我们一开始写的entry的配置项,根据这个js去打包的文件有一个顺序,就是我总结的这个:

这里的依赖顺序必须是:对象从上往下依赖,数组从右到左依赖(如果互不依赖的可以忽略顺序)

如果不按照这个顺序去写的话,会出现依赖错误的问题!!!

然后在output里面再进行一下配置:

output: {
 path: path.join(__dirname, dllConfig.outFile), // 打包后文件输出的位置
 filename: '[name].dll.[chunkhash].js',
 library: '[name]_library'
 // 主要是给DllPlugin中的name使用,
 // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },

这样在执行 webpack -p --progress --config build/webpack.dll.conf.js 指令的时候会生成如下:

vue webpack打包优化操作技巧 

是不是看到文件后面的hash就一脸懵逼,这怎么办,我们没有办法去进行复制粘贴了!!(我们的目的不就是不进行复制粘贴吗 正经脸-_-)

要实现命令操作之后不进行复制粘贴操作就需要使用webpack的HtmlWebpackPlugin插件

在plugins里面配置一下HtmlWebpackPlugin

new HtmlWebpackPlugin({
 filename: path.join(__dirname, '../', config.dev.index),
 template: 'index.ejs',
 inject: false
}),

然后在根目录添加一个index.ejs模版(ejsGitHub地址 ), index.ejs中代码如下:

<body>
 <div id="app"></div>
 <!-- dll files will be auto injected -->
 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script type="text/javascript" src="/<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
 <% } %>
 <!-- built files will be auto injected -->
</body>

最后需要在config文件夹下的index.js进行一下修改: 在dev中添加: index: 'index.html',

项目在执行dev指令或者build指令之前需要先执行: webpack -p --progress --config build/webpack.dll.conf.js 在dll指令结束后 执行其他操作就可以完美的玩耍了:blush:

总结

至此代码打包优化的整个过程就基本结束了,测试一下,15分钟左右就可以完成打包,比之前打包快了将近10分钟,可以说是非常成功的一次尝试!!

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 #Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 #Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 #Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 #Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 #Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 #Javascript
Vue项目中设置背景图片方法
Feb 21 #Javascript
You might like
提升PHP执行速度全攻略
2006/10/09 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python深入06——python的内存管理详解
2016/12/07 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python多线程同步实例教程
2019/08/11 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
python3注册全局热键的实现
2020/03/22 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
技校生自我鉴定范文
2013/09/26 职场文书
医院护士的求职信范文
2013/12/26 职场文书
服务生自我鉴定
2014/01/22 职场文书
车辆工程专业求职信
2014/06/14 职场文书
车辆年检委托书范本
2014/10/14 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android