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中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python requests 使用快速入门
2017/08/31 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
服务中心夜班服务员岗位职责
2013/11/27 职场文书
股权收购意向书
2014/04/01 职场文书
个人合伙协议书范本
2014/10/14 职场文书
优秀党员申报材料
2014/12/18 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB