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脚本实现Web页面信息交互
Dec 21 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
用vuex写了一个购物车H5页面的示例代码
Dec 04 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的安全
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
js表单验证实例讲解
2016/03/31 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
用Python写一个自动木马程序
2019/09/17 Python
python多线程使用方法实例详解
2019/12/30 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
个人自我鉴定范文
2013/10/04 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
高一军训感想
2015/08/07 职场文书
python缺失值填充方法示例代码
2022/12/24 Python