【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.hqwc.cn/news/456568.html

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

相关文章

《C程序设计》上机实验报告(七)之指针的应用

实验内容&#xff1a; 1.运行程序 #include <stdio.h> void main() { int a10,*p; p&a; printf("%d",*p); scanf("%d",p); printf("%x",p); printf("%x",&p); *p5; printf("%d"…

【Java数据结构】单向 不带头 非循环 链表实现

模拟实现LinkedList&#xff1a;下一篇文章 LinkedList底层是双向、不带头结点、非循环的链表 /*** LinkedList的模拟实现*单向 不带头 非循环链表实现*/ class SingleLinkedList {class ListNode {public int val;public ListNode next;public ListNode(int val) {this.val …

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git

20240203在Ubuntu20.04.6下配置stable-diffusion-webui.git 2024/2/3 11:55 【结论&#xff1a;在Ubuntu20.04.6下&#xff0c;生成512x512分辨率的图像&#xff0c;大概需要11秒钟&#xff01;】 前提条件&#xff0c;可以通过技术手段上外网&#xff01;^_首先你要有一张NVID…

【Spring基础】从0开始学习Spring(2)

前言 在上篇文章&#xff0c;我已经讲了Spring中最核心的知识点&#xff1a;IoC&#xff08;控制反转&#xff09;以及DI&#xff08;依赖注入&#xff09;。这篇文章&#xff0c;我将讲一下关于Spring框架中的其它比较琐碎但是又还是挺重要的知识点&#xff0c;因此&#xff…

Windows中如何使用 Anaconda 和 gempy地质建模

GemPy是一个免费开源的Python软件包&#xff0c;主要用于建立三维地质模型。以下是windows下GemPy的安装过程。 一、&#xff08;可选步骤&#xff09;N卡加速 如果使用的是英伟达的RTX显卡&#xff0c;可以去N卡官网下载cuda安装包以启用GPU加速。 首先检查显卡支持的CUDA版…

六轴机器人奇异点

1 奇异点说明 有着6个自由度的KUKA机器人具有3个不同的奇点位置。即便在给定状态和步骤顺序的情况下,也无法通过逆向变换(将笛卡尔坐标转换成极坐标值)得出唯一数值时,即可认为是一个奇点位置。这种情况下,或者当最小的笛卡尔变化也能导致非常大的轴角度变化时,即为奇点位置…

6-2、T型加减速计算简化【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本节介绍简化T型加减速计算过程&#xff0c;使其适用于单片机数据处理。简化内容包括浮点数转整型数计算、加减速对称处理、预处理计算 一、浮点数转整型数计算 根据上一节内容已知 常用的晶振大小…

C++ PE文件信息解析

尝试解析PE文件结构, 于是编写了此PE信息助手类, 暂时完成如下信息解析 1.导出表信息(Dll模块, 函数) 2.导入表信息(Dll模块, 函数) 3.资源表信息(字符串表, 版本信息, 清单信息) CPEHelper.h #pragma once// // brief: PE文件解析助手类 // copyright: Copyright 2024 Flame…

ai扩图怎么玩?分享玩法和工具!

AI扩图是近年来兴起的图片处理技术&#xff0c;它通过人工智能算法&#xff0c;将一张小图片放大并修复&#xff0c;使其呈现出高清晰度的效果。这项技术对于我们日常的图片处理工作来说&#xff0c;无疑是一大福音。本文将为你详细解析AI扩图的玩法&#xff0c;以及介绍一些实…

力扣经典题:另一棵树的子树

直接省事一点&#xff0c;炒一下100题的代码&#xff0c;分别讨论单节点以及双空节点的情况&#xff0c;然后进行递归调用 bool isSameTree(struct TreeNode* p, struct TreeNode* q) {if(pNULL&&qNULL){return true;}if(pNULL||qNULL){return false;}if(p->val!q-…

移动Web——Bootstrap

1、Bootstrap-简介 Bootstrap是由Twitter公司开发维护的前端UI框架&#xff0c;它提供了大量编写好的CSS样式&#xff0c;允许开发者结合一定HTML结构及JavaScript&#xff0c;快速编写功能完善的网页及常见交互效果 <!DOCTYPE html> <html lang"en"> &…

should be also和should also be

will also be 是正确的 但老师和新概念的两个说法都没有错. will also be 是固定搭配.就好像will not be一样, 限定词加在be前.老师说的是陈述之类的句型 Nbe动词alson/adj/动词短语.例&#xff1a;He is also good at physic. should be also还是should also be also应该插在…