[Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin
2016-06-23 01:12
639 查看
Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).
The libaraies like 'lodash', 'jquery' are required alomost all the projects and once download, rarly change any more. So it would be a good idea to spreate those common libaries into a common vendor file.
So rename the entry, add 'app' and 'vendor' entries.
So the output file canbe named like 'bundle.app.js' and 'bundle.vendor.js':
We will use webpack build in CommonsChunkPlugin:
Now we can include those two bundle files into index.html:
The libaraies like 'lodash', 'jquery' are required alomost all the projects and once download, rarly change any more. So it would be a good idea to spreate those common libaries into a common vendor file.
entry: { app: './js/app.js', vendor: ['lodash', 'jquery'], },
So rename the entry, add 'app' and 'vendor' entries.
So the output file canbe named like 'bundle.app.js' and 'bundle.vendor.js':
output: { filename: 'bundle.[name].js', path: resolve(__dirname, 'dist'), pathinfo: true, },
We will use webpack build in CommonsChunkPlugin:
plugins: [ isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', }), ].filter(p => !!p),
Now we can include those two bundle files into index.html:
<script src="/bundle.vendor.js"></script> <script src="/bundle.app.js"></script>
相关文章推荐
- [Webpack 2] Hashing with Webpack for long term caching
- [Webpack 2] Polyfill Promises for Webpack 2
- [Webpack 2] Tree shaking with Webpack 2
- [Webpack 2] Validate your Webpack config with webpack-validator
- (二)webpack入门——webpack的使用
- (一)webpack入门——webpack的安装
- Grunt、gulp、webpack、不要听着高大上你就上,试试Codekit?
- webpack
- [Webpack 2] Intro to the Production Webpack Course
- [转]webpack 使用优化指南
- webpack 多entry 配置
- webpack打包压缩工具的使用方法
- webpack es6支持配置
- webPack 使用方便快捷
- webpack loader 列表
- webpack进阶构建项目(一)
- 实用的webpack 配置文件
- webpack学习笔记一(入门)
- 【webpack】使用webpack进行ES6开发
- Webpack傻瓜式指南(未完待续)