vue项目打包优化方式(让打包的js文件变小)

 更新时间:2022年04月30日 12:45:46   作者:吃了碳水就想睡觉  
这篇文章主要介绍了vue项目打包优化方式(让打包的js文件变小),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

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

进入可视化面板

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

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

在项目根目录中创建vue.config.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文件体积变小

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

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

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

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    对Vue.js之事件的绑定(v-on: 或者 @ )详解

    今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    这篇文章主要介绍了vue如何封装Axios的get、post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3调度器错误解析完美解决Unhandled error during execution of scheduler flush的问题

    Vue3调度器错误解析完美解决Unhandled error during executi

    最近开发时在Vue3项目中看到控制台出现 “Unhandled error during execution of scheduler flush. This is likely a Vue internals bug”这个警告,下面给大家介绍Vue3调度器错误解析,完美解决Unhandled error during execution of scheduler flush的问题,一起看看吧
    2025-04-04
  • vue之封装多个组件调用同一接口的案例

    vue之封装多个组件调用同一接口的案例

    这篇文章主要介绍了vue之封装多个组件调用同一接口的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue解决弹出蒙层滑动穿透问题的方法

    vue解决弹出蒙层滑动穿透问题的方法

    这篇文章主要介绍了vue解决弹出蒙层滑动穿透问题的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中js判断长时间不操作界面自动退出登录(推荐)

    vue中js判断长时间不操作界面自动退出登录(推荐)

    这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue批量更新dom的实现步骤

    Vue批量更新dom的实现步骤

    本文将结合实例代码,介绍Vue批量更新dom的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • vue中input的v-model清空操作

    vue中input的v-model清空操作

    这篇文章主要介绍了vue中input的v-model清空操作,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 浅谈Vuex@2.3.0 中的 state 支持函数申明

    浅谈Vuex@2.3.0 中的 state 支持函数申明

    这篇文章主要介绍了浅谈Vuex@2.3.0 中的 state 支持函数申明,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue实现文件切片上传功能的示例代码

    Vue实现文件切片上传功能的示例代码

    在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传。本文介绍了Vue实现文件切片上传的示例代码,需要的可以参考一下
    2022-10-10

最新评论