webpack的资源入口通常是以entry为单元进行编译提取，那么当多entry共存的时候，CommonsChunkPlugin的作用就会发挥出来，对所有依赖的chunk进行公共部分的提取，但是在这里可能很多人会误认为抽取公共部分指的是能抽取某个代码片段，其实并非如此，它是以module为单位进行提取。
假设我们的页面中存在entry1，entry2，entry3三个入口，这些入口中可能都会引用如utils，loadash，fetch等这些通用模块，那么就可以考虑对这部分的共用部分机提取。通常提取方式有如下四种实现：
1、传入字符串参数，由chunkplugin自动计算提取
new webpack.optimize.CommonsChunkPlugin('common.js')
这种做法默认会把所有入口节点的公共代码提取出来, 生成一个common.js
2、有选择的提取公共代码
new webpack.optimize.CommonsChunkPlugin('common.js',['entry1','entry2']);
只提取entry1节点和entry2中的共用部分模块, 生成一个common.js
3、将entry下所有的模块的公共部分（可指定引用次数）提取到一个通用的chunk中
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
minChunks: function (module, count) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
});
提取所有node_modules中的模块至vendors中，也可以指定minChunks中的最小引用数；
4、抽取enry中的一些lib抽取到vendors中
entry = {
vendors: ['fetch', 'loadash']
};
new webpack.optimize.CommonsChunkPlugin({
name: "vendors",
minChunks: Infinity
});
添加一个entry名叫为vendors，并把vendors设置为所需要的资源库，CommonsChunk会自动提取指定库至vendors中。
方案二、通过 externals 配置来提取常用库
external的配置相对比较简单，只需要完成如下三步：
1、在页面中加入需要引入的lib地址，如下：
<head>
<script src="//cdn.bootcss.com/jquery.min.js"></script>
<script src="//cdn.bootcss.com/underscore.min.js"></script>
<script src="/static/common/react.min.js"></script>
<script src="/static/common/react-dom.js"></script>
<script src="/static/common/react-router.js"></script>
<script src="/static/common/immutable.js"></script>
</head>
2、在webapck.config.js中加入external配置项：
module.export = {
externals: {
'react-router': {
amd: 'react-router',
root: 'ReactRouter',
commonjs: 'react-router',
commonjs2: 'react-router'
},
react: {
amd: 'react',
root: 'React',
commonjs: 'react',
commonjs2: 'react'
},
'react-dom': {
amd: 'react-dom',
root: 'ReactDOM',
commonjs: 'react-dom',
commonjs2: 'react-dom'
}
}
}
3、非常重要的是一定要在output选项中加入如下一句话：
output: {
libraryTarget: 'umd'
}
|
方案三、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 |
|
Lee 12:52:22
方案四、使用 Happypack 加速你的代码构建
|
|
Lee 12:52:48
开启happypack的线程池 happypack的处理思路是将原有的webpack对loader的执行过程从单一进程的形式扩展多进程模式，原本的流程保持不变，这样可以在不修改原有配置的基础上来完成对编译过程的优化，具体配置如下： const HappyPack = require('happypack'); const os = require('os') const HappyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length}); // 启动线程池}); module:{ rules: [ { test: /\.(js|jsx)$/, // use: ['babel-loader?cacheDirectory'], use: 'happypack/loader?id=jsx', exclude: /^node_modules$/ } ] }, plugins:[ new HappyPack({ id: 'jsx', cache: true, threadPool: HappyThreadPool, loaders: ['babel-loader'] }) ] |
|
Lee 12:53:14
方案五、增强 uglifyPlugin uglifyJS凭借基于node开发，压缩比例高，使用方便等诸多优点已经成为了js压缩工具中的首选，但是我们在webpack的构建中观察发现，当webpack build进度走到80%前后时，会发生很长一段时间的停滞，经测试对比发现这一过程正是uglfiyJS在对我们的output中的bunlde部分进行压缩耗时过长导致，针对这块我们可以使用webpack-uglify-parallel来提升压缩速度。 |
|
Lee 12:53:47
方案六、Tree-shaking & Scope Hoisting wepback在2.X和3.X中从rolluo中借鉴了tree-shaking和Scope Hoisting，利用es6的module特性，利用AST对所有引用的模块和方法做了静态分析，从而能有效地剔除项目中的没有引用到的方法，并将相关方法调用归纳到了独立的webpack_module中，对打包构建的体积优化也较为明显，但是前提是所有的模块写法必须使用ES6 Module进行实现，具体配置参考如下： // .babelrc: 通过配置减少没有引用到的方法 { "presets": [ ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }], // https://www.zhihu.com/question/41922432 ["es2015", {"modules": false}] // tree-shaking ] } // webpack.config: Scope Hoisting { plugins:[ // https://zhuanlan.zhihu.com/p/27980441 new webpack.optimize.ModuleConcatenationPlugin() ] } |