Vue项目总结之webpack常规打包优化方案


Posted in Javascript onJune 06, 2019

由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^。

分析打包文件

要优化,先分析。我们先要知道到底是哪里拖慢我们的打包速度呢?

打包后生成文件分析

可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件

安装

npm i webpack-bundle-analyzer -D

使用

修改 webpack.prod.conf.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// 构建完成后,浏览器会自动打开localhost:8080
webpackConfig.plugins.push(
 new BundleAnalyzerPlugin({
  analyzerPort: 8080,
  generateStatsFile: false
 })
)

Vue项目总结之webpack常规打包优化方案

通过图片可以看到打包后文件的具体信息

打包进度条显示,可以查看到打包进度百分比

simple-progress-webpack-plugin 可以显示打包百分比

安装

npm i simple-progress-webpack-plugin -D

使用

修改 webpack.prod.conf.js 文件

const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
...
 plugins: [
  new SimpleProgressWebpackPlugin()
 ]
...

效果如下:

 Vue项目总结之webpack常规打包优化方案

资源与依赖包的控制

通过上面进度可以看到,打包过程中,卡顿在压缩的地方过长,当项目越来越臃肿的时候,我们要需要对项目静态资源以及依赖包进行整理,

图片过大的可以压缩,这里推荐一个还不错的压缩 链接

  • 项目中没有使用的依赖可以删除,可以按需引用的依赖,按需引用
  • 项目里面使用 ElementUI 和 Echarts 都是全部引用挂在 Vue.prototype 上,现都改为按需引用。

减少文件搜索范围

设置 resolve.alias 字段,避免打包时如果使用相对路径访问或着 import 文件时会层层去查找解析文件

resolve: {
 alias: {
  '@': resolve('src')
 }
}

合理配置 extensions 扩展名

resolve.extensions 能够自动解析确定的扩展,但是如果 extensions 扩展名过多,会导致解析过程过多,所以我们要合理配置扩展名,不要过多配置扩展名,项目引用多的文件,扩展名放在前面,我司项目中多的是 vue , js 文件,可以只引用这两种。

resolve: {
 extensions: ['.vue', '.js']
}

loader 预处理文件增加 include 匹配特定条件

预处理各种文件时指定匹配目录后, webpack 解析文件时就不会循环查找其他目录,加快解析速度。

happypack 多线程执行

webpack 执行预处理文件时单线程的,我们可以使用 happypack 来多线程处理文件。

安装

npm i happypack  -D

使用

修改 webpack.base.js 文件

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module: {
 rules: [
  {
   test: /\.js$/,
   loader: 'happypack/loader?id=babel', // 原始loader替换成`happypack/loader`
   include: [resolve('src')]
  }
 ]
},
plugins: [
 new HappyPack({
  // id标识 需要处理的loader
  id: 'babel',
  // loader配置和原始配置一样
  loaders: [
   {
    loader: 'babel-loader',
    options: {
     presets: ['es2015'],
     cacheDirectory: true
    }
   }
  ],
  threadPool: happyThreadPool
 })
]

babel-plugin-dynamic-import-node 异步加载

babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译

安装

npm i babel-plugin-dynamic-import-node -D

使用

修改 .babelrc 文件

"env": {
 "development": {
  "plugins": ["dynamic-import-node"]
 },
 "production": {
  "plugins": ["dynamic-import-node"]
 }
}

注意:使用插件 build 后没有 chunk files 文件。

总结

项目经过以上优化,打包从 30 分钟,到 2 分钟,整体还有优化空间,可以使用其他 cdn , dll 等优化方式。

以上所述是小编给大家介绍的Vue项目总结之webpack常规打包优化方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 #Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 #Javascript
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
You might like
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
innerText 使用示例
2014/01/23 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python统计cpu利用率的方法
2015/06/02 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
python常用排序算法的实现代码
2019/11/08 Python
基于python操作ES实例详解
2019/11/16 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
先进人物事迹材料
2014/12/29 职场文书
人民检察院起诉书
2015/05/20 职场文书