使用webpack 2拆分“供应商”分块

Webpack是一个现代化的静态模块打包工具，它可以将多个模块打包成一个或多个bundle文件，以便在浏览器中加载。Webpack 2是Webpack的一个版本，它引入了一些新的特性和改进。

拆分“供应商”分块是指将第三方库或框架等供应商代码从应用程序代码中分离出来，单独打包成一个供应商（vendor）bundle文件。这样做的好处是可以将供应商代码缓存起来，减少应用程序代码的大小，提高页面加载速度。

拆分“供应商”分块的步骤如下：

1. 配置webpack.config.js文件：在配置文件中，使用entry属性指定应用程序的入口文件，使用output属性指定打包后的文件输出路径和文件名。
2. 使用CommonsChunkPlugin插件：在配置文件中，使用CommonsChunkPlugin插件来拆分“供应商”分块。该插件可以将多个入口文件中共享的模块提取到一个单独的供应商bundle中。

示例代码如下：

const webpack = require('webpack');

module.exports = {

 entry: {

   app: './src/app.js',

   vendor: ['react', 'react-dom', 'lodash'] // 第三方库

 },

 output: {

   path: __dirname + '/dist',

   filename: '[name].bundle.js'

 },

 plugins: [

   new webpack.optimize.CommonsChunkPlugin({

     name: 'vendor',

     minChunks: Infinity

   })

 ]

};

上述示例中，'react'、'react-dom'和'lodash'是第三方库，它们被提取到了一个名为vendor.bundle.js的供应商bundle中。

1. 运行webpack命令：在命令行中运行webpack命令，Webpack会根据配置文件进行打包，生成供应商bundle和应用程序bundle。

使用webpack 2拆分“供应商”分块的优势包括：

1. 减少应用程序的加载时间：将供应商代码单独打包成一个bundle文件，可以减少应用程序代码的大小，提高页面加载速度。
2. 利用浏览器缓存：将供应商代码缓存起来，当页面再次加载时，可以直接从缓存中获取供应商bundle，减少网络请求，提高性能。
3. 更好的代码管理：将第三方库与应用程序代码分离，可以更好地管理和更新第三方库，同时也方便团队合作和维护。

拆分“供应商”分块的应用场景包括：

1. 多页面应用：当一个网站有多个页面时，可以将供应商代码提取到一个公共的供应商bundle中，以便多个页面共享使用。
2. 长期缓存：将供应商代码单独打包成一个bundle文件，并使用长期缓存策略，可以减少用户每次访问网站时需要下载的代码量，提高用户体验。

腾讯云相关产品和产品介绍链接地址：

1. 云服务器（CVM）：提供弹性计算能力，支持多种操作系统，适用于各种应用场景。详细介绍请参考：云服务器产品介绍
2. 云存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于图片、音视频、文档等数据的存储和管理。详细介绍请参考：对象存储产品介绍
3. 云数据库MySQL版（CDB）：提供高可用、可扩展的关系型数据库服务，支持自动备份、容灾、性能优化等功能。详细介绍请参考：云数据库MySQL版产品介绍

请注意，以上仅为示例，实际选择云计算产品时应根据具体需求进行评估和选择。