webpack教程(六)——分离组件代码

最新推荐文章于 2025-08-24 09:36:39 发布
转载 最新推荐文章于 2025-08-24 09:36:39 发布 · 83 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/herozhou/p/7049398.html
文章标签：

#webpack #javascript #ViewUI

本文通过实战演示如何使用Webpack将大型依赖如React从主包中拆分出来，显著减少主包体积，提升网页加载速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先来运行一下webpack命令，

看到app.js才4k。

安装一下react

npm install react --sava-dev

在app/index.js文件内引入react

运行webpack

看到我们的app.js文件竟然达到了100k。

因为app.js中包含了react的大量代码，造成了体积增大。

如果一个用户的网速只有1k/s，而且app.js中有加载css的过程例如还没有把css文件分离出去的情况，用户要等好几分钟才会看到整个页面。

这是无法忍耐的。怎么解决呢？

在webpack.config.js中添加如下配置。

执行webpack命令。

app.js已经缩小到2k,react也分离到vendor.js中。

在浏览器中运行一下看看

这里要注意了，先请求的是vendor.js，后请求的是app.js。

 

转载于:https://www.cnblogs.com/herozhou/p/7049398.html

Webpack配置【四】分离打包项目代码与组件代码
weixin_43837268的博客
08-02 649
1.下载一个测试用的react包【测试使用】 cnpm i react --save-dev 2.在index.js中引入【测试使用】 import 'react' 3.在webpack.config.js const path=require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin'); //cs...
webpack5 学习（十）—— 代码分离
且听风吟的博客
03-04 1204
代码分离是 webpack 中最引人注目的特性之一。 此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。
Vue CLI4.0 webpack配置属性——css.extract
Jay的博客
04-29 7664
css.extract Type: boolean | Object Default: 生产环境下是 true，开发环境下是 false 官方文档说明 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。 同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shado...
webpack基础——代码分离
weixin_33834910的博客
12-29 93
代码分离是什么 代码分离是一种技术，使得主文件被拆分为多个文件，同时保证分离后的代码对原有的功能没有影响。webpack也具备代码分离的能力。由于webpack的打包过程是自动化的，因此自然的通过webpack做代码分离后的文件之间的关系要么是自动关联的要么能很清晰看到分离文件之间的联系。webpack中代码分离的方案分为三类： 多入口webpack从一个入口出发对应一个输出的bundle.j...
webpack基础(8).代码分离
weixin_41294419的博客
05-10 412
代码分离
webpack快速入门——实战技巧：webpack模块化配置
u011927449的博客
11-15 112
首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下： const entry ={}; //声明entry变量 entry.path={...
webpack教程——css的加载
weixin_30371469的博客
05-30 82
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css-loader加载css文件，再用style-loader添加在页面中 在app目录下创建component.css文件 body{ background-color: ...
Vue CLI4.0 webpack配置属性——css.sourceMap
Jay的博客
04-29 5716
css.sourceMap Type: boolean Default: false 用途 设置是否开启 css 的 sourse map功能。css 的 sourse map作用类似与 js 的 sourse map。 注意：开启可能会影响构建性能。 用法 module.exports = { publicPath: './', // 基本路径 outputDir: 'dist' /...
Webpack系列——不同模式的打包
Smart_J_King的博客
01-12 404
Development 和 Production 模式的区分打包 在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。 1.webpack-merge 插件安装： npm install webpack-merge -D 这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。 (1)共用配置 新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共
webpack打包经验——处理打包文件体积过大的问题
ZQ13771472517的博客
07-18 2107
前言 最近对一个比较老的公司项目做了一次优化，处理的主要是webpack打包文件体积过大的问题。 这里就写一下对于webpack打包优化的一些经验。 主要分为以下几个方面： 去掉开发环境下的配置 ExtractTextPlugin：提取样式到css文件 webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin：提...
基于webpack Code Splitting实现react组件的按需加载.pdf
06-29
为了解决这一挑战，webpack 提供了一项关键特性——Code Splitting（代码分割）。通过代码分割，我们可以将应用代码拆分成多个独立的模块，按需加载，从而优化用户体验，尤其是减少首屏加载时间。 Code Splitting ...
vue 系列——vue2-webpack2框架搭建踩坑之路
08-28
创建webpack配置文件时，需要注意js和vue文件的分离，否则将导致配置文件无效。作者分享了自己的经验，提醒大家不要把js和vue文件放在一起。 五、创建babelrc文件 babelrc文件是必备的配置文件，作者分享了自己的...
探索Webpack与Vue整合——构建知乎日报应用
vue-loader是一个webpack加载器，允许你以单文件组件的形式编写Vue组件。它通过vue-template-compiler将Vue组件中的模板部分编译成JavaScript，通过css-loader和vue-style-loader处理样式。vue-style-loader在开发...
vue：vue中的ref和reactive
weiweiqiao的专栏
08-20 220
Vue3中ref和reactive是创建响应式数据的两种方式。ref适合基本类型和对象，通过.value访问，传递时不会丢失响应性；reactive仅处理对象，直接访问属性，但解构赋值会丢失响应性。ref更通用安全，适合独立数据；reactive适合逻辑相关的数据组。在组合式函数中推荐返回ref，复杂状态管理可用reactive配合toRefs。两者在模板中都能自动解包，但reactive需注意解构问题。
微前端架构核心要点对比
分享前端工程化、动效魔法与性能之舞！
08-23 380
本文总结了前端应用隔离的常见方案。样式隔离主要采用Shadow DOM、BEM/CSS Modules、CSS-in-JS和PostCSS四种方式，各有优缺点；JS隔离通过iframe沙箱、快照沙箱和Proxy代理实现；公共依赖管理使用NPM、Webpack External等技术；路由状态更新采用路由劫持或主应用整合；预加载利用requestIdleCallback；通信方式包括URL传参、props传值、localStorage、postMessage、发布订阅模式和状态管理。
Vue.js 中使用 Highcharts 构建响应式图表 - 综合指南
Aaroncoo的博客
08-21 555
为了更好的可视性和维护性，让我们为每个图表创建一个组件。添加三个空文件：Chart.vue、MapChart.vue 和 StockChart.vue。您现在需要知道的是， Vue-cli会为您完成所有繁重的配置，例如 webpack 配置、应用程序骨架等。要设置环境，请创建一个新目录并导航到该目录（使用终端），然后使用此命令安装 Vue-cli ：npm install -g vue-cli。安装完成后，您将看到配置文件已自动添加到您的目录中，例如index.html，App.vue，main.js等。
《深入源码理解webpack构建流程》
LQS5858的博客
08-19 876
Webpack 是一个现代 JavaScript 静态模块打包工具，其核心流程包括：初始化参数、创建 Compiler 实例、加载插件、执行编译（构建模块依赖图）、封装优化和生成资源。核心类包括负责整体调度的 Compiler 和实际处理模块的 Compilation，通过插件系统（基于 Tapable）和 Loader 机制实现模块转换。源码阅读建议从 webpack.js 入口开始，逐步深入 Compiler、Compilation、NormalModule 等核心模块，结合调试工具理解构建流程。整个过
Webpack的使用
2401_87008233的博客
08-21 445
Webpack是前端自动化构建工具，通过模块化处理各类资源（JS/CSS/图片等）并优化打包。其核心包括入口文件、输出配置、加载器处理非JS文件、插件扩展功能、开发/生产模式等。基本操作流程：1)初始化项目；2)安装Webpack及相关工具；3)配置webpack.config.js定义入口/输出等参数；4)在package.json添加构建脚本；5)运行npm命令完成打包。Webpack通过分析模块依赖关系，最终生成优化后的静态资源文件。
构建现代前端工程：Webpack/Vite/Rollup配置解析与最佳实践
最新发布
分享前端技术，也聊聊工程师的成长与生活。
08-24 690
以模块化打包为核心，通过构建依赖图谱处理各类静态资源（JS/CSS/图片等），其核心优势在于插件生态（如Babel-loader、CSS Modules）和复杂场景支持（代码分割、懒加载）。其设计哲学是开发体验优先，但对传统项目兼容性较弱。专为库打包优化，通过静态分析实现极致Tree-Shaking（可清除未使用的类方法），输出代码无运行时包装。但缺乏对动态导入、CSS分离等应用级功能的原生支持，需依赖插件扩展。解析三大工具核心配置与优化策略，助你精准匹配应用场景，提升工程效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值