Vue 性能优化——缩小打包文件的体积

方法：使用 webpack 提供的externals 节点，把包配置成外联的形式

步骤：

1、打开 build 目录下的 webpack.prod.conf.js 文件，添加如下代码：

externals: {

    // 包名: window全局对象,

    echarts: ‘echarts’,

    vue: ‘Vue’,

    ‘vue-router’: ‘VueRouter’,

    axios: ‘axios’,

    lodash: ‘_’,

    nprogress: ‘NProgress’

}

2、打开 index.html 首页，在头部header区域添加如下代码：

< script src=”https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js”>< /script>

< link rel=”stylesheet” href=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css”>

< script src=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.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/axios/0.18.0/axios.min.js”>

< script src=”https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js”>< /script>