webpack优化构建速度示例-externals:

最新推荐文章于 2024-11-02 20:49:21 发布
最新推荐文章于 2024-11-02 20:49:21 发布
阅读量238 收藏
点赞数 2
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36413371/article/details/138917482
版权

externals 配置项主要用于防止将某些 import 的包（package）打包到 bundle 中，而是在运行时（runtime）再从外部获取这些扩展依赖（external dependencies）。这样做的主要目的是为了解决打包文件过大的问题。

优化前

webpack.config.js

const config = {
    entry: './src/index.js',
    output: {
        filename: 'main.js'
    },
  mode: 'development',
}

module.exports = config;

src/index.js
import $ from 'jquery'
$(document).ready(() => {
    $('body').css({
        width: '100%',
        height: '100%',
        'background-color': 'red'
    })
})

在这里插入图片描述

优化后

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: './src/index.js',
    output: {
        filename: 'main.js'
    },
  mode: 'development',
  externals: {
    $: 'jQuery'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
  })
  ]
}

module.exports = config;

src/index.js
$(document).ready(() => {
    $('body').css({
        width: '100%',
        height: '100%',
        'background-color': 'red'
    })
})

index.html
<!DOCTYPE html>
<html lang="en">
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</body>
</html>

在这里插入图片描述

可以看到将jquery排除在打包内，节省了319-177=144ms

小强有个dream
关注
webpack性能优化
doomliu的博客
05-16 900
性能分析 1. 统计基本信息 使用webpack内置的stats 可以统计出构建时间、构建资源清单及资源大小等信息 使用方法： 1. cli webpack --env production --json > stats.json 2. node API webpack(config, (err, stats) => { console.log(stats); }); 2. 速度分析 使用speek-measure-webpack-plugin 插件功能 分析出整个构建时间和每个loa
webpack打包优化
weixin_40542544的博客
08-18 580
1、使用 HappyPack 来加速代码构建 原理： （1）由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情只能一件一件地做，不能多件事一起做。 （2）而 HappyPack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建。 2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 优化原理 （1）我们的项目依赖中通常会引用大量的 npm 包，而这些包
webpack 的externals配置
AM1n98的博客
07-05 825
webpack 中的 externals 配置提供了的方式。如果需要引用一个库或文件，但是又不让它被webpack打包（减少打包的时间+减少打包后的bundle文件体积），且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals来实现。
webpack external 详解
qq_41167198的博客
11-21 803
webpack external 详解
Webpack--externals(外部扩展)详解
热门推荐
weixin_39964419的博客
10-14 1万+
externals用法详解
vue项目优化——Webpack的externals的理解
qq_42931285的博客
05-15 3355
externals、vue项目优化
webpack-node-externals中文文档
hys628021的博客
07-04 5051
webpack-node-externals中文文档 轻松排除 Webpack 中的节点模块 Webpack 允许您定义外部组件 - 不应捆绑的模块。 当为后端捆绑 Webpack 时 - 您通常不想捆绑其node_modules依赖项。该库创建了一个外部函数，node_modules在 Webpack 中捆绑时会忽略该函数。 （受Webpack系列出色的后端应用程序的启发） 快速使用 >npm install webpack-node-externals --save-dev > 在你项
webpack-external-import:从其他Webpack捆绑包动态导入模块。 单独应用之间的无痛代码共享
05-02
请参阅webpack 5中有关模块联合的示例 **要跳到开发部分， 安装 npm npm install webpack-external-import --save 纱 yarn add webpack-external-import 2.0版！ 重大改写采用了原始概念并将其直接构建到webpack...
backbone-fundamentals-webpack:将Backbone.js与Webpack一起使用的示例
05-17
最后，从提供的压缩包文件"backbone-fundamentals-webpack-master"来看，这应该是一个包含示例代码的项目，用于展示如何配置和构建Backbone.js应用。开发者可以从中学习如何设置Webpack配置文件（webpack.config.js...
Learn-webpack：面向初学者的Webpack课程
02-06
- **Plugin**：插件（Plugin）在Webpack构建过程中执行额外的任务，比如优化、压缩、生成HTML文件等。 2. **Webpack 工作流程** - **解析（Resolve）**：Webpack 会遍历Entry，解析模块间的依赖关系。 - **加载...
webpack-training:肖恩·拉金（Sean Larkin）的Webpack教程
04-11
Webpack 是一个现代JavaScript应用程序的模块打包工具，它将各种资源如JavaScript、CSS、图片等视为模块，通过静态分析你的源代码来构建一个依赖关系图，然后根据这个图将所有模块打包成一个或多个浏览器可识别的...
一次webpack 的externals配置带来的优化体验
tomorrownan的博客
08-20 5062
externals官方解释： 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 1.优化前 使用echarts的一个项目，使用npm run build 打包以后还有6m左右的大小，如下： 这里打包以后文件明显过大，可能会造成用户体验差。 2.优化 考虑到可能是因为引...
配置webpack中externals来减少打包后vendor.js的体积
w13707470416的博客
12-19 1485
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。 webpack的外部扩展(externals)可以有效的解决。externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于...
vite和webpack
weixin_44719499的博客
10-29 749
特性vue-cli构建工具ViteWebpack开发速度启动快，HMR 快启动和 HMR 相对较慢配置简洁，基于和.env灵活，基于插件生态Vite 插件系统，适用于多种框架Vue CLI 插件系统，专为 Vue 设计适用场景现代浏览器、小型至中型项目大型项目、多浏览器支持需求项目模板支持多框架模板（Vue、React 等）Vue 专属项目模板总体来说，更适合快速构建现代前端应用，尤其是在开发速度和热更新上体验更佳。而vue-cli。
webpack使用详解
最新发布
weixin_61933613的博客
11-02 478
webpack作为一款主流的构建工具，对比后来者Vite虽然存在一些缺点，例如启动慢，配置复杂等。在很多项目中使用依然基于webpack构建，有必要掌握其概念、构建流程和配置方法。水平有限欢迎补充指正
Webpack5常用配置
weixin_42375707的博客
11-02 923
Webpack常用配置
第十五章 Vue工程化开发及Vue CLI脚手架
Calvin的博客
10-29 809
Vue CLI 是 Vue 官方提供的一个全局命令工具，它解决了以往工程化开发模式的主要问题，生成标准化的配置，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】1. 开箱即用，零配置2. 内置 babel 等工具3. 标准化。
vue打包项目直接输出压缩包，方便部署线上
duanaibing3017的博客
10-30 298
"@vue/cli-service": "^3.8.3" 使用的是 "filemanager-webpack-plugin": "^8.0.0","@vue/cli-service": "3.6.0", 使用的是 "filemanager-webpack-plugin": "2.0.5",注意事项：不同webpack版本，安装不同版本的 filemanager-webpack-plugin。webpack版本太高自行降低filemanager-webpack-plugin试试。
做一个能适配「手机」的网站需要注意什么
illidri的博客
11-01 251
像现在主流会采用 H5 响应式布局，仅涉及前端的开发工作，代码量少，效果佳，是一种性价比比较高的选择，如果题主有意要进行网站建站，特别是想要手机浏览也有一定效果，可以选择这种~当然还有一种类似的方式叫自适应布局，俗称 AWD（AdaptiveWebDesign），同样是检测视口分辨率，判断不同尺寸和分辨率是什么设备，从而返回不同布局页面。最根本的区别在于，响应式页面的代码量少，但质量要求高，根据不同分辨率自动调整排版，而自适应页面需要根据不同设备准备不同的页面，这样前期的开发工作就大了很多。
vue如何安装配置file-loader、webpack-node-externals
09-12
Vue项目中安装和配置File Loader以及Webpack-node-externals主要是为了支持非JavaScript静态资源的打包，比如图片、CSS、JSON等，并处理Node.js模块外部引用的问题。以下是具体的步骤： 1. **安装File Loader**: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值