关于webpack项目资源加载优化的几个实践(以react举例)
来源:互联网 发布:自考师范本科 知乎 编辑:程序博客网 时间:2024/05/29 09:10
一、老生长叹的代码异步加载
1、使用webpack api: require 按需加载本地js文件
文档见:require.ensure
例如在react router中:
getComponent (nextState, cb) { require.ensure([], (require) => { cb(null, connectComponent(require('COMPONENT/XXX/').default)) }, 'XXX')}
在用户发出跳转到这个url的动作时,会调用getComponent 方法
此时同步调用require.ensure 方法,在该方法的异步回调里加载该component依赖的js打包文件
2、使用ExtractTextWebpackPlugin 按需加载本地css文件
文档见:ExtractTextWebpackPlugin
配置示例:
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: [{ loader: 'css-loader', options: { minimize: true }}, { loader: "postcss-loader", options: { plugins: function () { return [ pxtorem({ rootValue: 100, propWhiteList: [] }) ] } }}]})new ExtractTextPlugin({ filename: '[name].[contenthash:6].css', // allChunks : true // 若要按需加载 CSS 则请注释掉该行})
3、使用scriptjs 按需加载外部js文件
文档见:rstacruz/scriptjs
因为有时项目会依赖第三方js文件,这时需要请求外部链接,而且很多时候该文件需要加载在全局环境
引入方式:
<script src="https://XXXX/js/script.min.js"></script>
在html文件中直接加入script 标签即可,加入后即可在任意方法中同步或异步加载外部资源了
$script('https://XXXX/xxxx.js', function () { $script('XXXX/xxxx.min.js', function () { // callback })})
4、按需加载外部css文件
因为scriptjs只支持js,如果有对应的外部css文件怎么办呢?
let node = document.createElement('link');node.rel = 'stylesheet';node.href = cssUrl;document.getElementsByTagName('head')[0].appendChild(node);// 下面的代码是在redux中标识别该资源已经被加载过// 以确保再次加载该方法的时候不会重复加载css// (不用redux的时候在任意全局变量里标识即可)initState.resource[cssUrl] = 1;
二、资源打包和转换
1、代码中使用require 加载图片等资源
<img src={require('./img/xxxx@3x.png')} width="100%"/>
这里使用了url-loader,webpack会根据资源大小选择不同的两种加载方式
{ test: /\.(png|jpe?g|gif)$/, loader: 'url-loader', query: { limit: 10240, // 10KB 以下使用 base64 name: 'img/[name]-[hash:6].[ext]' }}
这里的limit 数值可以自行设置
2、合并打包第三方公用库,全局加载
entry: { app: path.join(src, 'app.js'), // ================================ // 框架 / 类库 分离打包 // ================================ vendor: [ 'react', 'react-dom', 'react-redux', 'react-router', 'react-router-redux', 'redux', 'redux-thunk', 'XXXXX' ]}
全局加载venfor.js 文件,并使用CommonsChunkPlugin 第三方库 chunk即可
new webpack.optimize.CommonsChunkPlugin({ names: ['vendor']})
文档见:CommonsChunkPlugin
阅读全文
0 0
- 关于webpack项目资源加载优化的几个实践(以react举例)
- WebPack在React项目架构中的应用实践
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- 基于React+webpack的项目环境搭建
- react+webpack项目常用的插件(plugins)
- react+webpack项目常用的插件(plugins)
- 关于ES6+React+webpack的环境搭建
- webpack打包react项目
- webpack构建react项目
- 使用 webpack 优化资源
- vue项目优化之页面的按需加载(vue+webpack)
- React 实践项目 (一)
- React 实践项目 (二)
- React 实践项目 (三)
- React 实践项目 (四)
- React 实践项目 (五)
- React 实践项目 (四)
- webpack项目实践
- Linux 修改环境变量
- 第一周 枚举 例题3.生理周期
- laravel运行带有group by的sql时提示 “SQLSTATE[42000]: Syntax error or access violation: 1055 错误解决
- SSM框架开发web项目系列(一) 环境搭建篇
- python 基础-2
- 关于webpack项目资源加载优化的几个实践(以react举例)
- tomcat启动不了?
- thinkphp5.0+js 手机下拉加载更多
- 2.Add Two Number
- Unity的学习过程
- 手机REM使用代码
- AOP 面向切面编程
- Java中带有T Z格式(UTC是世界标准时间)的时间转换为date,string,long类型
- 新的开始