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 相关文章推荐
最简单的js图片切换效果实现代码
Sep 24 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
JS+CSS实现炫酷光感效果
Sep 05 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 批量更新网页内容实现代码
2010/01/05 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
深入PHP curl参数的详解
2013/06/17 PHP
arguments对象
2006/11/20 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python中对列表排序实例
2015/01/04 Python
django 常用orm操作详解
2017/09/13 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
客运企业隐患排查工作方案
2014/06/06 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
Python List remove()实例用法详解
2021/08/02 Python
Nginx限流和黑名单配置
2022/05/20 Servers