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+iview分页组件的封装
Nov 17 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详解Vue router路由
Nov 20 Vue.js
vue+iview实现手机号分段输入框
Mar 25 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
Jquery异步提交表单代码分享
2015/03/26 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
垃圾回收的优点和原理
2014/05/16 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
中文专业求职信
2014/06/20 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
入团介绍人意见范文
2015/06/04 职场文书
欢送会主持词
2015/07/01 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
外出学习心得体会范文
2016/01/18 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
JavaScript实现简单拖拽效果
2021/09/15 Javascript