vue项目优化

使用公用的 cdn

index.html

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- cdn 加速，减小 vendor.js 体积 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

package.json

上面引入过 cdn 文件的依赖， 全都可以去掉了。

main.js

删除或者注释跟element 相关的代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

webpack.base.conf.js

在 webpack 配置中添加外部扩展：

module.exports = {
...
      // 外部扩展，通过 cdn 引入，不会被webpack打包
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios'
      }
  }

这个时候已经好了，清除一下项目 node_modules 中的删除的不需要的依赖吧， uninstall 也行，直接删除整个 node_modules 文件夹，重新 npm install 也行

再次编译发布，依赖资源就会小很多了：

npm run build