vue性能优化-------vendor优化详细用法（瘦身），减小体积，引入cdn

vue性能优化方面有一个是关于vendor的优化，vue其他方面的优化产考https://blog.csdn.net/Chris__wang/article/details/90477555当项目打包的时候，会将ElementUI，Vue，Vuex，axios，VueRouter等都打包进vendor.js里面，导致最后的vendor.js有900k之多页面访问的时候会很浪费时间，所以根据...

Chris__Wang

10635人浏览 · 2019-05-24 10:25:58

Chris__Wang · 2019-05-24 10:25:58 发布

vue性能优化方面有一个是关于vendor的优化，vue其他方面的优化产考https://blog.csdn.net/Chris__wang/article/details/90477555

当项目打包的时候，会将ElementUI，Vue，Vuex，axios，VueRouter等都打包进vendor.js里面，导致最后的vendor.js有900k之多

页面访问的时候会很浪费时间，所以根据网上提供的方法，这些比较占资源的插件引入cdn，速度会快很多，下面是详细用法

main.js里面引入组件，这里面一定要引入，不然本地项目跑步起来，其中注意 ELEMENT 要大写，因为插件里面定义的就是大写

import Vue from 'vue';
import ELEMENT from 'element-ui';
import App from './App';
import router from './router';
import VueAwesomeSwiper from 'vue-awesome-swiper';

import 'swiper/dist/css/swiper.css';

import 'font-awesome/css/font-awesome.css';

import axios from 'axios';
Vue.use(ELEMENT)
Vue.use(VueAwesomeSwiper)
Vue.use(swiper);
Vue.config.productionTip = false
Vue.prototype.axios = axios;
Vue.prototype.baseUrl = './static';


new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

接着在index.html中引入CDN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
        <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css">
        <script  type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=cw8GwPA7uInfpRok8fRlNqVKroLwbpIO" ></script>
        <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script> 
        <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
        <title>首页</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

build/webpack.base.conf.js里面也要改一下

externals: {//module同目录加上此配置，打包的时候忽略这些
    "BMap": "BMap",
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter'
  }

在src/router/index.js里面也要把vue.use(VueRouter)去掉

然后再打包，发现只有170k确实减少了很多

注意，如果发现Vue Router相关的报错，可以不对Router进行忽略，将路由打进包里也没问题，这就需要在上面的这些配置处不对router相关做修改

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^