前端性能优化二十四：花裤衩模板第三方库打包

(1). 工作原理:

①. externals配置在所创建bundle时:
    a. 会依赖于用户环境(consumer's environment)中的依赖,防止将某些import的包(package)打包到bundle中
    b. 在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)

②. webpack会检测这些组件是否在externals中注册,如果注册则不会将其打包到app.js中

③. 修改了记得重启webpack

④. 在需要使用它的时候,可以通过CMD、AMD、或window全局方式访问

---

2. 哪些第三方库适合?

①. vue、vue-router、axios、element-ui、qs、crypto-js、vuex、moment、highlight.js

②. 要考虑大小不超过500kb,如果用到ueditor大型工具库需要单独打包.

(2). element-ui分析:

①. 都会把element-ui打包进去,每次修改都会下载element-ui.

②. 独立出去用cdn加载,用户下一次就有缓存.

③. 后边随便怎么改,只要有缓存就不会在下element-ui.

(3). 例子:

// externals中的key是后面需要require的名字，value是第三方库暴露出来的方法名
// 'alias': 'ObjName'
// 简单的配置如上，alias 是项目内使用时的组件名称，ObjName 是某外部组件对外暴露的名称。
// 比如 vue 的 window 全局名称是 Vue
// 比如 vue-router的 window 全局名称是 VueRouter
// 比如 jquery 的 window 全局名称是 Jquery
module.exports = {
  externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'Element',
    'qs': 'Qs'
  }
}