关于webpack项目资源加载优化的几个实践(以react举例)

一、老生长叹的代码异步加载

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值