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 相关文章推荐
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
JavaScript异步操作中串行和并行
Nov 20 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
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python 除法保留两位小数点的方法
2018/07/16 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python安装selenium包详细过程
2019/07/23 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python 魔法函数实例及解析
2019/09/25 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
电钳专业个人求职信
2014/01/04 职场文书
工地宣传标语
2014/06/18 职场文书
司机工作自我鉴定
2014/09/19 职场文书
安全教育片观后感
2015/06/17 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
python实现的web监控系统
2021/04/27 Python