vue-cli2 减小vendor.js 的体积

作者: 一城叶秋风 | 来源:发表于2018-12-20 17:40 被阅读0次

vue-cli2 减小vendor.js 的体积
vue-cli打包vue、vue-router引入外部cdn
减小体积
App 体积减小
减小apk体积
减小APK体积
减小APK体积
减小.a文件体积
减小静态库体积
如何减小apk体积

vendor.js在webpack打包的会将第三方库也进行打包，就会导致vendor.js的体积变大

解决方案：使用cdn加速去从第三方服务器加载第三方库而不是自己的服务器，可以节省自己服务器的带宽

在index.html中使用cdn方式引入第三方库

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- element-ui css样式 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css"/>
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
    <script src="https://cdn.bootcss.com/highcharts/6.1.0/highcharts.js"></script>
  </body>
</html>

修改webpack.base.conf.js， module.exports 中加入，同时将main.js中引入第三方库进行删除

// key 是第三方库名 value 是你项目中的别名
externals: {
    vue: "Vue",
    vuex: "Vuex",
    "vue-router": "VueRouter",
    element: "element-ui",
    axios: "axios"
  }

没有使用前