vue优化 | 减少打包组件|webpack externals

先放使用方法

1、 vue.config.js配置

module.exports = {
 configureWebpack: {
        externals: {
            'echarts': 'echarts',
            'qs': 'Qs',
            'element-ui': 'ElementUI ',
            "moment": "moment"
        }
   }
}

属性名 element-ui 指的是 import ElementUI from 'element-ui';
属性值 ElementUI 指的是element-ui插件暴露出来的全局对象名。

2、 在index.html文件引入CND (推荐一个cnd网站：[BootCDN](https://www.bootcdn.cn/))

image.png image.png

3、在vue中使用，使用require引入

let echarts = require('echarts/lib/echarts');

image.png

---

webpack的externals

官网文档解释的很清楚，就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

怎么理解呢？
有时我们希望我们通过script引入的库，如用CDN的方式引入的jquery，我们在使用时，依旧用require的方式来使用，但是却不希望webpack将它又编译进文件中。

参考资料:
外部扩展(externals)
配置 externals 引入 cdn 资源