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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
JavaScript实现商品评价五星好评
Nov 30 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
php获取字段名示例分享
2014/03/03 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python入门之后再看点什么好?
2018/03/05 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
教育局长自荐信范文
2013/12/22 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
运动会1000米加油稿
2015/07/21 职场文书
中秋节随笔
2015/08/15 职场文书
八年级英语教学反思
2016/02/15 职场文书
PHP新手指南
2021/04/01 PHP
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Python多个MP4合成视频的实现方法
2021/07/16 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android