vue项目如何打包之项目打包优化(让打包的js文件变小)


Posted in Vue.js onApril 30, 2022

通常在一个vue项目中会用到很多插件什么,swiper,axios,vuerouter,vuex,…,那么使用了很多插件势必会造成打包的js文件过大,影响加载速度,造成不好的用户体验,那么我就来讲一件我自己总结打包方式,(让js文件变小)

我使用的命令是 vue ui 可视化打包操作

vue项目如何打包之项目打包优化(让打包的js文件变小)

进入可视化面板

vue项目如何打包之项目打包优化(让打包的js文件变小)

默认情况下,vue-cli 3.0生成的项目,隐藏了webpack配置项,如果我们需要配置webpack

需要通过vue.config.js来配置

在项目根目录中创建vue.config.js文件,

vue项目如何打包之项目打包优化(让打包的js文件变小)

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口,调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

补充:

chainWebpack可以通过链式编程的形式,修改webpack配置

configureWebpack可以通过操作对象的形式,修改webpack配置

**###7.加载外部CDN

默认情况下,依赖项的所有第三方包都会被打包到js/chunk-vendors.

.js文件中,导致该js文件过大

那么我们可以通过externals排除这些包,使它们不被打包到js/chunk-vendors.

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口,调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                moment:'moment'
            })
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

在public 中的index文件中使用cdn引入外部js 从而然打包的js文件体积变小

vue项目如何打包之项目打包优化(让打包的js文件变小)

我们来看下 没有使用externals设置排除项 打包的js体积大小

vue项目如何打包之项目打包优化(让打包的js文件变小)

来看下使用externals设置排除项以后的大小

vue项目如何打包之项目打包优化(让打包的js文件变小)

明显变小了,而且把项目跑在服务器上 明显加载速度提升了很多

其他的优化还有 使用vuerouter 的路由懒加载,这里就不再赘述,vuerouter懒加载解释


Tags in this post...

Vue.js 相关文章推荐
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
关于vue-router-link选择样式设置
Apr 30 #Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 #Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 #Vue.js
Vue操作Storage本地化存储
Apr 29 #Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 #Vue.js
详解Vue3使用axios的配置教程
Apr 29 #Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
You might like
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python实现括号匹配方法详解
2020/02/10 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
文明倡议书范文
2014/04/15 职场文书
协议书的格式
2014/04/23 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
放射科岗位职责
2015/02/14 职场文书
公路施工安全责任书
2015/05/08 职场文书
余世维讲座观后感
2015/06/11 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书