【webpack】优化提升

webpack优化提升

      • 安装webpack相关内容
      • 向下兼容游览器-@babel/polyfill
      • 进一步优化@babel/polyfill
      • 模块联邦-共享模块
      • 如何提升构建性能
        • 通用环境下
          • 1,webpack更新到最新版本
          • 2,将loader应用于最少数量的必要模块
          • 3,引导(每个额外的loader/plugin都有其启动时间,尽量少使用工具
          • 4,解析
          • 5,小即是快
          • 6,持久化缓存
          • 7,自定义plugin/loader
          • 8,progress plugin
          • 9,dll
          • 10,worker池
        • 开发环境下
          • 1,增量编译
          • 2,在内存中编译
          • 3,stats.to.Json加速
          • 4,Devtool
          • 5,避免在生产环境才用到的工具
          • 6,最小化 entry chunk
          • 7,避免额外的优化步骤
          • 8,输出结果不携带路径信息
          • 9,Node.js版本问题
          • TypeScript Loader
        • 生产环境下
          • 不启用sourcMap

安装webpack相关内容

  • npm init -y,自动建立package.json
  • npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D

向下兼容游览器-@babel/polyfill

  • 某些代码在低版本游览器无法兼容使用
    在这里插入图片描述

  • 采用@babel/polyfill兼容

  • 步骤一:先安装

  • npm i @babel/polyfill -D

  • 页面导入
    在这里插入图片描述

  • npx webpack打包后最终效果

  • 很多很多的内容,是因为把游览器许多需要优雅降级的一些包都打在这个项目里面了
    在这里插入图片描述

进一步优化@babel/polyfill

  • 原因:import @babel/polyfill,这样是全局引入整个polyfill包,包体积大,会污染全局环境

  • 采取这个方式

  • npm i exports-loader -D

  • npm install core-js@3
    在这里插入图片描述

  • 最后页面上删除import @babel/polyfill即可,npx webpack即可

模块联邦-共享模块

  • 直接将一个应用的包应用于另一个应用
  • 同时具备整体应用以及打包的能力
    在这里插入图片描述

在这里插入图片描述

  • 两者的webpack配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导入模块联邦
const { ModuleFederationPlugin } = require('webpack').container;module.exports = {mode: 'production',entry: './src/index.js',plugins: [new HtmlWebpackPlugin(),//实例化一下new ModuleFederationPlugin({name: 'nav', //标识联邦模块的名字,别的应用访问这个组件就要通过这个名字filename: 'remoteEntry.js', //这个远端使用这个模块的名字remotes: {}, //引用其他的联邦模块exposes: {//暴露组件'./Header': './src/Header.js', //./Header代表到时候别人用的时候基于这个路径拼接url},shared: {},}),],
};

在这里插入图片描述

  • 内容调用在这里插入图片描述

如何提升构建性能

通用环境下
1,webpack更新到最新版本
2,将loader应用于最少数量的必要模块

在这里插入图片描述

3,引导(每个额外的loader/plugin都有其启动时间,尽量少使用工具
4,解析

在这里插入图片描述

5,小即是快

在这里插入图片描述

6,持久化缓存

在这里插入图片描述

7,自定义plugin/loader

在这里插入图片描述

8,progress plugin

在这里插入图片描述

9,dll

在这里插入图片描述

  • 注意使用dll的时候,必须先安装jquery
const path = require('path');
const webpack = require('webpack');
module.exports = {mode: 'production',entry: {jquery: ['jquery'],},output: {filename: '[name.js]',path: path.resolve(__dirname, 'dll'),library: '[name]_[hash]',},plugins: [new webpack.DllPlugin({name: '[name]_[hash]',path: path.resolve(__dirname, 'dll/manifest.json'),}),],
};
  • 然后package.json里配置一下
    在这里插入图片描述
  • 运行时间就会降低了
    在这里插入图片描述
    在这里插入图片描述
  • 注意,此时提升了构建速度,但画面是不行的
  • 要再配置一下webpack.config.js
    在这里插入图片描述
10,worker池

在这里插入图片描述

  • 注意,不要使用太多的worker,因为node.js的runtime和loader都有启动开销,启动会消耗时间
  • 当遇到比较大的进程,再使用
  • npm i thread-loader -D
  • 在webpack.config.js中
module.exports = {mode: 'development',entry: './src/index.js',module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: [//使用worker池分流{loader: 'thread-loader',options: {workers: 2,},},{//目的,解析一些es6的代码loader: 'babel-loader',options: {presets: ['@babel/preset-env'],},},],},],},
};
开发环境下
1,增量编译

在这里插入图片描述

2,在内存中编译

在这里插入图片描述

3,stats.to.Json加速

在这里插入图片描述

4,Devtool

在这里插入图片描述

5,避免在生产环境才用到的工具

在这里插入图片描述

6,最小化 entry chunk

在这里插入图片描述

7,避免额外的优化步骤

在这里插入图片描述

8,输出结果不携带路径信息

在这里插入图片描述

9,Node.js版本问题

在这里插入图片描述

TypeScript Loader

在这里插入图片描述

生产环境下
不启用sourcMap

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/671281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

挂耳式蓝牙耳机哪家的好用?几款好用的挂耳式蓝牙耳机推荐

挂耳式蓝牙耳机日益成为潮流的标志,赢得了广泛用户的喜爱。其方便性覆盖了通讯、学习、听音乐甚至观看影视等多个场景,极大地简化了我们的日常生活。挂耳式蓝牙耳机在设计上前卫且颜值高,使用中能提供无与伦比的舒适感受。但很多人想问挂耳式…

【靶场实战】Pikachu靶场敏感信息泄露关卡详解

Nx01 系统介绍 Pikachu是一个带有漏洞的Web应用系统,在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习,那么Pikachu可能正合你意。 Nx02 敏感信息泄露概述 由于后台人员的疏忽或者不当的设计&…

分享springboot框架的一个开源的本地开发部署教程(若依开源项目开发部署过程分享持续更新二开宝藏项目MySQL数据库版)

1首先介绍下若依项目: 若依是一个基于Spring Boot和Spring Cloud技术栈开发的多租户权限管理系统。该开源项目提供了一套完整的权限管理解决方案,包括用户管理、角色管理、菜单管理、部门管理、岗位管理等功能。 若依项目采用前后端分离的架构&#xf…

Java与JavaScript:区别与联系

随着编程语言的不断发展和创新,Java和JavaScript这两种语言都在各自的领域内占据了重要地位。尽管它们的名称相似,但它们在很多方面有着显著的区别。同时,这两种语言之间也存在一定的联系,使得它们在许多应用中能够相互协作。 区…

Linux实验记录:使用DHCP动态管理主机地址

前言: 本文是一篇关于Linux系统初学者的实验记录。 参考书籍:《Linux就该这么学》 实验环境: VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注: 动态主机配置协议(DHCP&…

Linux实验记录:使用Postfix与Dovecot部署邮件系统

前言: 本文是一篇关于Linux系统初学者的实验记录。 参考书籍:《Linux就该这么学》 实验环境: VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注: Web服务和FTP文件传输服务虽能实现文…

如何利用大模型结合文本语义实现文本相似度分析?

常规的文本相似度计算有TF-IDF,Simhash、编辑距离等方式,但是常规的文本相似度计算方式仅仅能对文本表面相似度进行分析计算,并不能结合语义分析,而如果使用机器学习、深度学习的方式费时费力,效果也不一定能达到我们满…

MybatisPlus多表关联查询

MP多表关联查询 我们关联user表和product表,两个表如下: user表 product表 现在我们要关联两个表查询出product的全部信息已经对应的用户名字 先写sql语句 然后创建vo package com.hyn.mybatisplus.entity;import lombok.Data;Data public class…

全面理解jvm

jvm是什么? java虚拟机 为什么要学jvm? 解决性能调优,优化内存空间,防止服务崩掉的问题。同时是java的工作环境, 一些基于java开发的语言Scale , Jpython都可以运行在java虚拟机上。 jvm的工作原理: 类加…

第十篇【传奇开心果系列】Python的OpenCV技术点案例示例:图像分割

传奇开心果短博文系列 系列短博文目录Python的OpenCV技术点案例示例系列短博文目录一、前言二、OpenCV图像分割介绍三、OpenCV分割算法示例代码四、归纳总结系列短博文目录 Python的OpenCV技术点案例示例系列 短博文目录 一、前言 OpenCV是一个广泛应用于计算机视觉和图像处…

时序数据库Influxdb查询多个字段_field同一时间的值,组成一条数据

Influxdb将表格数据多个字段_field从垂直列布局聚合成水平布局行字段。 问题 1、Influxdb 是一种时间序列数据库,在我的项目中主要用来存储换热站的测点数据的。换热站有非常多的测点,我们用Flux 语法去查询测点数据,返回的数据结构是每个测…

uniapp顶部导航栏高度适配

为了实现好看又实用的顶部导航栏,不得不自己定义导航栏样式。而自己定义的导航栏高度会因为手机的型号不同所展示的效果也就不同,所以只能通过适配高度来达到预期的效果 1.需要在page.json文件中对需要自定义导航栏文件进行配置 "navigationStyle…

2024年小白学编程需要什么基础

学习编程需要什么基础?答案是意识基础和实践基础。 一、学习编程的意识基础 所谓学习编程的意识基础,实际上就是指建立在逻辑思维上的理解能力。只有具备逻辑思考能力,才能比较无障碍地理解编程语言的代码语句所描述的过程步骤,…

C语言基础语法..

1.函数的基本语法 函数的格式为: 返回值类型 函数名(参数列表){ 函数体(包括返回值语句) } 利用上述的格式 我们可以自己整一个实现加法功能的函数 int add(int a, int b){return a b; } int main(){int c add(10, 20);printf("%d", c);// 30return …

基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码 <template></template> <script> export default {created() {//监听弹起快捷键addEventListener("keyup", this.keyup);},destroyed(d) {//移除监听弹起快捷键removeEventListener("keyup", this.keyup);},methods: {keyup(…

golang开发window环境搭建

1.本人开发环境&#xff1a;window10,idea2020.1.3 2.Go语言环境版本1.5.1 2.1. go语言插件 下载地址 csdn - 安全中心 2.1.1 go的各个版本官网Other Versions - GoLand 2.2下载安装 3.idea配置go环境 4.创建go项目 、5.运行

BLEUScore AttributeError: ‘list‘ object has no attribute ‘split‘——问题解决

目录 问题解决 问题 出现错误&#xff1a; BLEUScore AttributeError: ‘list’ object has no attribute ‘split’ 解决 应该是torchmetrics版本对torch的要求&#xff0c;需要对应版本: pip install torchmetrics0.6.2具体需要根据自己版本去降低&#xff0c;一般是往低…

Unet 实战分割项目、多尺度训练、多类别分割

1. 介绍 之前写了篇二值图像分割的项目&#xff0c;支持多尺度训练&#xff0c;网络采用backbone为vgg的unet网络。缺点就是没法实现多类别的分割&#xff0c;具体可以参考&#xff1a;二值图像分割统一项目 本章只对增加的代码进行介绍&#xff0c;其余的参考上述链接博文 本…

在本地运行大型语言模型 (LLM) 的六种方法(2024 年 1 月)

一、说明 &#xff08;开放&#xff09;本地大型语言模型&#xff08;LLM&#xff09;&#xff0c;特别是在 Meta 发布LLaMA和后Llama 2&#xff0c;变得越来越好&#xff0c;并且被越来越广泛地采用。 在本文中&#xff0c;我想演示在本地&#xff08;即在您的计算机上&#x…

DataX详解和架构介绍

系列文章目录 一、 DataX详解和架构介绍 二、 DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 文章目录 系列文章目录DataX是什么&#xff…