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

点击有惊喜

前言

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

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

问题分析

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

解决方法

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

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

如何构建外部库

1. 新建一个项目，然后新建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');

1. 配置webpack.config.js

    entry: {        "index": srcPath    },    output: {        path: outputPath,        filename: '[name].js',        library: 'MY_LIB',  //这个是全局的变量名        libraryTarget: 'umd'  //这里写umd，也为了后期兼容其他模式    },

3.构建和发布

把构建好的js发布上线，

如何在项目中引入这个库

1. 在项目的html页面头部引入这个js。
   比如

 <script src="http://g.alicdn.com/my.js"></script>

1. 配置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'    }],

1. 大功告成。

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

总结

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

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

点击有惊喜