vue中的vendor.js文件过大问题及解决

目录

vue vendor.js文件过大问题

1. cdn 引入

2. 在使用vue等包的地方,注释掉import引入

3. 打包忽视掉vue等包

vue打包降低vendors.js文件大小

vue打包项目优化

vue vendor.js文件过大问题 1. cdn 引入

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> <script src="https://unpkg-com/vuex@3.4.0/dist/vuex.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.2.O/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>

如果是内网开发:cdn下载对应版本放入public下(例:public-->minJs-->cdn静态文件) 

<%if (process.env.NODE_ENV === 'production'){ %>//此处为外网cdn,具体根据公司需求 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> <script src="https://unpkg-com/vuex@3.4.0/dist/vuex.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.2.O/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script> <%} else {%> <script src="./minJs/axios.min.js"></script> <script src="./minJs/vue.min.js"></script> <script src="./minJs/vuex.js"></script> <script src="./minJs/vue-router.min.js"></script> <script src="./minJs/element-ui.min.js"></script> <%}%>

注意:cdn版本与package版本一直,否则会出现报错,且cdn引用顺序又要求(例:element要在vue下面)否则报错:如下图

2. 在使用vue等包的地方,注释掉import引入

在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中

在main.js

在store文件加中的index.js

在api/request.js文件中

在router/index.js文件中

3. 打包忽视掉vue等包

在vue.config.js

chainWebpack: (config) => { if (isPro) { //isPro 本人判断是否产线 config.externals={ 'vue':'vue', 'vuex':'Vuex', 'vue-router':'VueRouter', 'element-ui':'ELEMENT', 'axios':'axios' } config.plugin("extract-css").tap((args) => [ { filename: `css/[name].${Version}.css`, chunkFilename: `css/[name].${Version}.css`, }, ]); } },

第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由

vue打包降低vendors.js文件大小 vue打包项目优化

减少vendors.js文件的大小

我们在打包vue项目的时候经常会遇到打包后的文件中vendors.js文件特别大,这个文件中的内容主要是我们项目中引入的第三方插件js文件,我们可以更改webpack的配置文件来排除这些第三方插件,然后在index.html文件中通过增加cdn引入的方式来优化我们的代码,使的我们的项目更快的加载。

方法:

找到vue项目的配置文件,如果使用的是vue-cli4脚手架,可以在项目的根目录下创建一个vue.config.js的配置文件,然后在配置文件中增加如下代码。

module.exports = {     configureWebpack: config => {         externals: {             vue: 'Vue',  // 排除Vue文件             'vue-router': 'VueRouter',  // 排除VueRouter             moment: 'moment',    // 排除moment组件 一个时间格式化插件             axios: 'axios',    // 排除axios组件             'element-ui': 'ELEMENT',  // 排除element-ui组件,这里要使用大写             echarts: 'echarts',  // 排除echarts组件             qs: 'Qs'  // 排除qs组件          }      }  }

externals是webpack的一项配置项, 官方解释:配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反,所创建的 bundle 依赖于那些存在于用户环境(consumer’s environment)中的依赖。此功能通常对 library 开发人员来说是最有用的,然而也会有各种各样的应用程序用到它。

换句话说就是防止将某些 import 的包(package)打包到 bundle 中。也就是打包时不打包这些文件。

然后在public目录下的index.html文件里增加cdn的静态资源路径就ok了。

压缩文件

这里的压缩js不是指的代码的压缩,而是使用webpack的CompressionPlugin插件进行gzip压缩,首先安装插件

npm i -D compression-webpack-plugin

然后在vue.config.js文件中进行设置,找

// 引入插件 const CompressionPlugin = require('compression-webpack-plugin'); module.exports = {     configureWebpack: config => {         return {             // 插件配置             plugins: [             // 实例化插件                 new CompressionPlugin({                     // 需要压缩的文件后缀                     test: /\.js$|\.html$|\.css$|\.webp$|\.webp$|\.webp$|\.webp$/,                     // 压缩后的文件                     filename: '[path][base].gz',                     // 超过次大小的文件进行处理                     threshold: 102400,                     // 是否删除原资源                     deleteOriginalAssets: false                 })             ]         }     } }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。 

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    js默认事件汇总

    js默认事件汇总,事件,表单,默认事件   就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键