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

前端之家收集整理的这篇文章主要介绍了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 = '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');
  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': 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'
    }],
  1. 大功告成。

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

总结

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

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

点击有惊喜

原文链接:https://www.f2er.com/react/302188.html

猜你在找的React相关文章