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在图片上传的时候压缩图片
Nov 18 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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生成随机数或者字符串的代码
2008/09/05 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Python中按值来获取指定的键
2019/03/04 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python是什么 Python的用处
2020/05/26 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
高三体育教学反思
2014/01/29 职场文书
同学聚会主持词
2014/03/18 职场文书
合作协议书
2014/04/23 职场文书
环境建议书
2015/02/04 职场文书
管辖权异议上诉状
2015/05/23 职场文书
求职信如何撰写?
2019/05/22 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
react如何快速设置文件路径别名
2021/04/28 Javascript
详解Python如何批量采集京东商品数据流程
2022/01/22 Python