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 相关文章推荐
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue基于Teleport实现Modal组件
May 31 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 $_SERVER当前完整url的写法
2009/11/12 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
浅谈Python中数据解析
2015/05/05 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
直接有效的自我评价
2014/01/11 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
护士找工作求职信
2014/07/02 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
如何书写授权委托书?
2019/06/25 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS