首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

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

示例代码如下:

代码语言:javascript
复制

const webpack = require('webpack');

module.exports = {

代码语言:txt
复制
 entry: {
代码语言:txt
复制
   app: './src/app.js',
代码语言:txt
复制
   vendor: ['react', 'react-dom', 'lodash'] // 第三方库
代码语言:txt
复制
 },
代码语言:txt
复制
 output: {
代码语言:txt
复制
   path: __dirname + '/dist',
代码语言:txt
复制
   filename: '[name].bundle.js'
代码语言:txt
复制
 },
代码语言:txt
复制
 plugins: [
代码语言:txt
复制
   new webpack.optimize.CommonsChunkPlugin({
代码语言:txt
复制
     name: 'vendor',
代码语言:txt
复制
     minChunks: Infinity
代码语言:txt
复制
   })
代码语言:txt
复制
 ]

};

代码语言:txt
复制

上述示例中,'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版产品介绍

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2-4 使用webpack的配置文件

简介 webpack打包是根据配置文件来执行工作的。 2. 默认配置 之所以直接执行npx webpack index.js就能打包成功,是由于webpack内置了配置文件。...尝试直接运行npx webpack会报错,因为webpack不知道打包的入口文件是啥。但其实一个项目的入口文件是极少有变动的,每次都写很麻烦。有没有什么办法呢? 3....修改配置文件 webpack默认读取的用户配置文件名叫做webpack.config.js。如果根目录下有这个文件,就会默认走这个文件,否则,会启用内置的配置。...总结一下webpack的打包命令方式: 全局安装webpack时可以直接运行webpack 项目内安装时可以运行npx webpack 不管全局安装还是项目内安装都可以使用脚本命令,会优先从node_module...5.作业 https://webpack.js.org/guides/getting-started

51540

Electron 使用 Webpack2 预编译 Electron 和 Browser targets

前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使用 Webpack2 的热部署功能来提高我们的开发效率,使我们在代码修改后能自动立即看到修改后的结果。...** 注:这里使用webpack是2.5.1版本 ** 工程结构 这个演示程序包含的文件结构如下所示: myapp |-- main.js |-- package.json |-- webpack.config.js...scripts 中的 electron 使用 "webpack --target electron-renderer" 来打包js和css,然后仍然使用 electron 来运行应用程序。...scripts 中的 web 使用 "webpack --target web" 打包js和css,同样,后面在使用 webpack-dev-server 时也需要使用 "--target web"选项...('is-electron-renderer')); src/index.html 测试的 html 文件,其中使用webpack 预编译好的 bundle.js 文件。

1K70

使用Webpack5创建Vue2项目及优化

// 这里设置2是因为上面安装的版本是 @babel/runtime-corejs2 配置webpack.config.js设置使用babel的规则 module.exports = { module...此外,这意味着 你可以就近管理图片文件,可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置,webpack 将会在打包输出中自动重写文件路径为正确的 URL。...1、安装 moment 插件(时间处理库) npm i -S moment 2、配置 IgnorePlugin // 引入 webpack const webpack = require('webpack...webpack 将根据以下条件自动拆分 chunks: 新的 chunk 可以被共享,或者模块来自于 node_modules 文件夹 新的 chunk 体积大于 20kb(在进行 min+gz 之前的体积...priority: -20, reuseExistingChunk: true, }, }, }, }, }; 2、项目中的使用

2.5K10

Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios 2017年8月补充 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,...以下为我写的博文: Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017...Axios api 接口调用文件 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地 Vue2+VueRouter2+Webpack...+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录 Vue2...+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结 以下为原文 前言 我们在前面的教程Vue2+VueRouter2+webpack 构建项目实战(四)接通

87790

webpack性能优化(2):splitChunks用法详解

之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli,默认生成的vendor.js...webpack-chart:用于webpack统计的交互式饼图。webpack-visualizer:可视化并分析你的 bundle,检查哪些模块占用空间,哪些可能是重复使用的。...这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码。防止复制:使用 CommonsChunkPlugin 去重和分离 chunk。...使用 webpack 特定的 require.ensure其实我们一帮需要做的是optimization.splitChunks。...performance性能监控这些限制告诉webpack如何/何时拆分块,它们仅定义了限制值,在限制值以上,警告在控制台中显示,仅此而已。

1.5K31

webpack性能优化(2):splitChunks用法详解

之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》如果使用vue-cli,默认生成的vendor.js...webpack-chart:用于webpack统计的交互式饼图。webpack-visualizer:可视化并分析你的 bundle,检查哪些模块占用空间,哪些可能是重复使用的。...这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码。防止复制:使用 CommonsChunkPlugin 去重和分离 chunk。...使用 webpack 特定的 require.ensure其实我们一帮需要做的是optimization.splitChunks。...performance性能监控这些限制告诉webpack如何/何时拆分块,它们仅定义了限制值,在限制值以上,警告在控制台中显示,仅此而已。

1.5K20

webpack 简单配置

1.webpack 是一个现代JavaScript 应用程序的静态打包器,它能够把各种资源,例如JS,样式,图片   等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源,...2.安装   前提条件,请确保安装了Node.js的最新版。   ...3.建立项目的webpack 文件     首先初始化目录: npm init     然后安装webpack: npm install webpack --save-dev   如果webpack 的配置文件不使用默认的文件名...webpack.dev.config.js     webpack 的打包命令可以结合 npm 的脚本使用例如: ?         .../app/entry-b2"] },     (2) Output 位于对象最顶级键(key),包括了一组选项,指示webpack 如何输出,       以及哪里输出,和他你所打包或使用webpack

82070

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度的 UEditor...富文本编辑器,详情点击《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器》。...经过测试,这个方法不适用于高版本的 jquery 高版本请直接使用下面第二种方法引入。...我的建议是,一般不使用 jQuery,如果使用的话,请确保在可控的范围内。否则,你算是给项目埋大坑了。...直接在 index.html 使用如下代码引入 jquery 然后配置一下 eslint ,然后就在项目中使用就可以了。

97970

全面认识ECMAScript模块

ES模块,但现在捆绑JavaScript应用的任务仍然是webpack等工具的专属,以获得最大的灵活性、代码拆分和对旧浏览器的兼容性。...有了2020年登陆的动态导入,我们可以根据用户的交互动态加载我们的代码(webpack在ECMAScript 2020中提供动态导入功能之前就已经提供了)。...通过动态导入,我们可以拆分我们的代码,只在合适的时刻加载重要的内容。在动态导入登陆JavaScript之前,这种模式是webpack这个模块捆绑器的专属。...像React和Vue这样的前端库,就大量使用了通过动态导入进行代码拆分的方式,在响应事件时加载分块代码,比如用户交互或者路由变化。...const { name, age } = module.default; 使用async/await动态导入 import()语句返回的总是一个Promise,这意味着我们可以对它使用async/await

51530
领券