webpack， react项目中利用外部JS库提升效率

点击有惊喜

前言

现在很多前端项目在构建时，都是一个vendor 公共JS文件和和一个app.js的文件，会造成一些弊端。

在项目的开发过程中，修改任何一个地方，都会触发JS的全局构建，需要等待非常久，长久下来大大的降低了开发效率。
另外一个弊端就是每次构建上线，vendor和app每次都会改变，任何一个小的更改都会使2个文件都改变，再次发布上线，用户的第一次加载速度都会很慢。

问题分析

实际在项目的过程中，依赖的外部库一般都会不改变的，所以可以把这一部分代码作为一个外部库，发布上线后通过CDN引入，无论再次构建和再次上线，这一部分代码都不会改变。
这样就可以解决问题的疼点。

解决方法

webpack对于公共库有几种解决方法，

dll-plugin：例子：https://github.com/webpack/webpack/tree/master/examples/dll，但在实际的操作中，dllPlugin的操作还是相对比较麻烦，不能达到一个完全的解耦状态，webpack为了做版本隔离，做了比较复杂的方案，但在项目实践中除了更麻烦意外实用性并不强。
自己构建commonJS模块，然后通过require.js做加载器，这样项目代码，外部库都是作为common.js库，然后另外在页面写代码初始化。这样的方案也比较麻烦
自己构架全局变量模块，这是相对来说，比较简单，也是本文中讨论的方案。以下就这种方法做详细讨论：

如何构建外部库

新建一个项目，然后新建index.js
然后里边引入我们需要构建的公共库；

示例代码如下：

exports.react = require('react');
exports.reactDom = 'react-dom');
exports.reactRedux = 'react-redux');
exports.reactRouter = 'react-router');
exports.reactRouterRedux = 'react-router-redux');
exports.redux = 'redux');
exports.reduxThunk = 'redux-thunk');
exports.reactAddonsTransitionGroup = '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="http://g.alicdn.com/my.js"></script>

配置webpack.config.js

主要是增加一个externals的配置，这样配置，构建出来的代码将不会包含相关的模块

externals: [{
        'react': 'window.MY_LIB.react','react-dom': MY_LIB.reactDom',114)">'redux': MY_LIB.redux',114)">'react-redux': MY_LIB.reactRedux',114)">'redux-thunk': MY_LIB.reduxThunk',114)">'react-router': MY_LIB.reactRouter',114)">'react-router-redux': MY_LIB.reactRouterRedux',114)">'react-addons-transition-group': MY_LIB.reactAddonsTransitionGroup'
    }],

大功告成。

再重新构建一次，就会发现速度飞快了。

总结

经过几步简单的修改，对项目的速度提升非常明显。

经测试，在用这种方式构建以后，项目构建速度提高50%以上，依据项目中的外部库而定。
用户在第二次升级的加载中，加载速度也提升了30%以上。
3.如果用的库和这个项目的一样，那么可以直接从CDN引入，而不需要再次构建，达到跨项目的重用。