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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
js函数般调用正则
Apr 08 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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/12/06 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
js转义字符介绍
2013/11/05 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JS变量及其作用域
2017/03/29 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
使用python 获取进程pid号的方法
2014/03/10 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
pycharm设置注释颜色的方法
2018/05/23 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
Django多个app urls配置代码实例
2020/11/26 Python
python matlab库简单用法讲解
2020/12/31 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
研发工程师的岗位职责
2013/11/18 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
个性婚礼策划方案
2014/05/17 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
肖申克救赎观后感
2015/06/02 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python