webpack配置多页应用-2

公共库的处理

原因

上一节我们说到了vender.bundle.js这个公共库。在多页面应用里我们经常会有多个页面都需要引入相同的文件如bootstrap、jquery等，如果每次都将其打包进js里是不是就浪费流量，因为每次打开一个新页面都请求一次js，而公共部分的js我们完全可以放在同一个js文件里，在第一次请求时加载，后面页面用到同样的文件时是不是直接从缓存里拿来用就行了，这样页面加载的js部分是不是就大大减小了。下面是提取公共库和未提取的对比

提取前

提取后

是不是可以看到尾提取的尾583kb,提取后只有154kb了。

实现

接下来我们开始实现提取公共库我们需要用到CommonsChunkPlugin这个插件来打包公共库这个库

new webpack.optimize.CommonsChunkPlugin(options)

options.name or options.names(string|string[]): 公共模块的名称
options.filename (string): 公开模块的文件名（生成的文件名）
options.minChunks (number|Infinity|function(module,count) - boolean): 为number表示需要被多少个entries依赖才会被打包到公共代码库；为Infinity 仅仅创建自定义的公共组件块，不会把任何modules打包进去。并且提供function，以便于自定义逻辑。

由于webpack内置对象optimize 已经提供了我们就不需要再单独安装了

const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin；

entry: Object.assign(config.entries(), {
        // 用到什么公共lib（例如jquery.js），就把它加进vendor去，目的是将公用库单独提取打包
        'vendor': ['jquery', 'avalon']
    }),

plugins: [

        //...
        new CommonsChunkPlugin({ //打包共用库
            name: 'vendor', //选择entry名为vendor的入口文件
            minChunks: Infinity //我们使用仅打包自定义的公共组件
        }),
        //...
    ]

接着运行看是不是已经被打包进公共库了。

上面的vendor里的三个参数是使用了resolve里的别名定义了的，这样遇到这三个别名是webpack就回先去别名对应的路径找文件，加快遍历速度。

alias:{
    "jquery": "js/lib/jquery.js",
    "avalon": "js/lib/avalon.js",
    //...
}

在此，html和js部分已经差不多完成了，接下来就是css部分了。

下一节我们开始说css部分

源码地址点击下载

webpack配置多页应用-2

公共库的处理

原因

实现

猜你喜欢