Webpack打包--优化项目

news2025/7/23 16:36:32

1. Webpack基本概念

目标: webpack本身是, node的一个第三方模块包, 用于打包代码

2.Webpack能做什么

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

3.Webpack的官方解释

从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包）
请添加图片描述

4.我写了一个后台管理的一个系统现在来进行一下项目的优化

  • 生成打包报告
  • 第三方库启用CDN
  • Element-UI组件按需加载
  • 路由懒加载
  • 首页的内容优化

5.首先就是在项目的顶部会有一个进度条
请添加图片描述

  • 安装 npm i --save nprogress

我是在vue ui 可视化中安装的

  • 在Vscode终端中输入 vue ui 进入Vue CLI
  • 找到左侧依赖，然后点击右上角的安装依赖
  • 进入运行依赖，输入nprogress
  • 点击选中以后滑到底部点击安装

请添加图片描述
请添加图片描述
使用nprogress

  • 在项目中的main.js导入nprogress
  • import NProgress from ‘nprogress’
  • import ‘nprogress/nprogress.css’
  • 在request拦截器中使用NProgress.start()，展示进度条
  • 在response拦截器中使用NProgress.done()，隐藏进度条

删除项目中的console.log(),只是在发布后删除，开发的时候不进行操作

同上进入依赖，不过这次是进入开发依赖，然后点击最下方的安装

请添加图片描述
在项目中找到 babel.config.js 文件

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 引入去除console.log()
    'transform-remove-consile'
  ]

完成，运行项目
只在发布阶段去移除console.log()，还是在 babel.config.js 文件
开发阶段
请添加图片描述
发布阶段
请添加图片描述

// 这是项目发布阶段需要要用到的babel插件
const prodPlugins = []
// 判断当前是开发阶段还是发布阶段
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

修改完以后要从新去运行项目

生成打包报告

请添加图片描述
使用第二种方式
请添加图片描述

通过 vue.config.js 修改 Webpack默认的配置，如果没有这个文件可以手动创建(在根目录中创建)

module.exports = defineConfig{
 
}

为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包入口文件:
1.开发模式的入口文件为scr/main-dev.js
2.发布模式的入口文件为src/main-prod.js

configureWebpack和chainWebpack

在 vue.config.js 导出的配置对象中，新增configureWebpack或chainWebpack节点来定义webpack的打包配置
在这里，configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方法不同：
1.chainWebpack 通过链式编程的形式，来修改默认的webpack配置
2.configureWebpack 通过操作对象的形式，来修改默认的webpack配置

通过chainWebpack自定义打包入口 （vue.config.js 文件）

1.首先把main.js删除或者更换名称main-dev.js
2.把main-dev.js中的内容复制一份在src目录下新建一个main-prod.js把复制的内容粘贴进去
3.进入 vue.config.js 文件

module.exports = defineConfig{
 chainWebpack: (config) => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

运行项目

通过externals加载外部CDN资源

module.exports = defineConfig{
 chainWebpack: (config) => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', (config) => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', (config) => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

通过externals加载外部CDN资源

需要在public/index.html文件的头部，添加CDN资源
首先要先把main-prod.js中的相关内容删掉
请添加图片描述
以.css为点缀的删除
进入public/index.html文件

 <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- 富文本编辑器 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的 js 文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

通过CDN优化ElementUI的打包

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加的组件，还是占用了较大的文件体积。此时，我们可以将element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。
具体操作流程如下:
1.在 main-prodjs 中，注释掉 element-ui按需加载的代码
2.在index.html的头部区域中，通过CDN 加载element-ui的js和css 样式

 <!-- element-ui 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css" />

  <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- 富文本编辑器 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />


  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的 js 文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>


  <!-- element-ui 的 js 文件 -->
  <script src="https://cdn.staticfile.org/element-ui/2.4.5/index.js"></script>

路由懒加载

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要 3 步:
1.安装@babel/plugin-syntax-dynamic-import 包
请添加图片描述

2.在 babel.configjs 配置文件中声明该插件

// 这是项目发布阶段需要要用到的babel插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  "presets": [
    "@vue/cli-plugin-babel/preset"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    // 发布产品时候的插件数组
    ...prodPlugins,
    // 路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3.将路由改为按需加载的形式，示例代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Login from '../components/Login.vue'
const Login = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Home.vue')
// import Welcome from '../components/Welcome.vue'
const Welcome = () => import(/*webpackChunkName: "Login_Home_Welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/User.vue'
const Users = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/user/User.vue')
// import Rights from '../components/power/Rights.vue'
const Rights = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/*webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Categories from '../components/goods/Cate.vue'
const Categories = () => import(/*webpackChunkName: "Categories_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/*webpackChunkName: "Categories_Params" */ '../components/goods/Params.vue')

// import Goods from '../components/goods/List.vue'
const Goods = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/List.vue')
// import Add from '../components/goods/Add.vue'
const Add = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/Add.vue')
// import Edit from '../components/goods/Edit.vue'
const Edit = () => import(/*webpackChunkName: "Goods_Add_Edit" */ '../components/goods/Edit.vue')

// import Orders from '../components/order/order.vue'
const Orders = () => import(/*webpackChunkName: "Orders_Reports" */ '../components/order/order.vue')
// import Reports from '../components/report/Report.vue'
const Reports = () => import(/*webpackChunkName: "Orders_Reports" */ '../components/report/Report.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    redirect: '/welcome',
    component: Home,
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        component: Welcome
      },
      {
        path: '/users',
        name: 'user',
        component: Users
      },
      {
        path: '/rights',
        name: 'rights',
        component: Rights
      },
      {
        path: '/roles',
        name: 'roles',
        component: Roles
      },
      {
        path: '/categories',
        name: 'categories',
        component: Categories
      },
      {
        path: '/params',
        name: 'params',
        component: Params
      },
      {
        path: '/goods',
        name: 'goods',
        component: Goods
      },
      {
        path: '/goods/add',
        name: 'add',
        component: Add
      },
      {
        path: '/orders',
        name: 'orders',
        component: Orders
      },
      {
        path: '/reports',
        name: 'report',
        component: Reports
      },
      {
        path: '/goods/edit/:id',
        name: 'edit',
        component: Edit
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

项目上线

创建一个文件夹
1.npm init -y
2.npm i
3.创建一个app.js
4.安装一个 npm i express -S
5.将我们打包生成的dist复制到新创建的文件夹中

const express = require('express')
const app = express()

app.use(express.static('./dist'))

app.listen(1314, () => {
  console.log('server running at http://127.0.0.1:1314');
})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

leetcode 2187. Minimum Time to Complete Trips（完成行程的最短时间）

leetcode 2187. Minimum Time to Complete Trips（完成行程的最短时间）

(Medium) time数组里面是每个bus完成一次路程需要的时间&#xff0c;假设时间单位是h, 比如time [1,2,3]就表示第1辆bus跑完路程需要1h&#xff0c;第2辆需要2h&#xff0c;第3辆需要3h. 那么把所有bus都考虑进来&#xff0c;总共要跑完totalTrips次路程&#xff0c;问至少需…
阅读更多...
数据库之基本功：Where 中常用运算符

数据库之基本功：Where 中常用运算符

1. 运算符及优先级 ( )优先级最高 SQL> show user; USER is "SCOTT" SQL> select ename, job, sal, comm from emp where jobSALESMAN OR jobPRESIDENT and sal> 1500;ENAME JOB SAL COMM …
阅读更多...
Pyspark基础入门5_RDD的持久化方法

Pyspark基础入门5_RDD的持久化方法

Pyspark 注&#xff1a;大家觉得博客好的话&#xff0c;别忘了点赞收藏呀&#xff0c;本人每周都会更新关于人工智能和大数据相关的内容&#xff0c;内容多为原创&#xff0c;Python Java Scala SQL 代码&#xff0c;CV NLP 推荐系统等&#xff0c;Spark Flink Kafka Hbase Hi…
阅读更多...
回收站清空恢复，4种方法任你选!

回收站清空恢复，4种方法任你选!

案例&#xff1a;不小心清空了回收站怎么恢复&#xff1f; “回收站刚刚清空的文件怎么恢复呀&#xff1f;辛苦收集的材料不小心删除了&#xff0c;请大神来帮我下。” 回收站是我们电脑上的一个非常实用的功能&#xff0c;可以让我们暂时存放不需要的文件或者是可以被删除的…
阅读更多...
启动u盘还原成普通u盘（Windows Diskpart）

启动u盘还原成普通u盘（Windows Diskpart）

使用windows系统的diskpart 命令解决系统盘恢复成普通U盘的问题&#xff1a;1. 按Windows R键打开运行窗口。在搜索框中输入“ Diskpart ”&#xff0c;然后按 Enter 键。2. 现在输入“ list disk ”并回车。3. 然后输入“ select disk X ”&#xff08;将 X 替换为可启动U盘的…
阅读更多...
围棋高手郭广昌的“假眼”棋局

围棋高手郭广昌的“假眼”棋局

&#xff08;图片来源于网络&#xff0c;侵删&#xff09;文丨熔财经作者|易不二2022年&#xff0c;在复星深陷债务压顶和变卖资产漩涡的而立之年&#xff0c;“消失”已久的郭广昌&#xff0c;在质疑与非议声中回国稳定军心&#xff0c;强调复星将在未来的五到十年迎来一个全新…
阅读更多...
安卓反编译入门03-dex2jar反编译apk得到Java源代码

安卓反编译入门03-dex2jar反编译apk得到Java源代码

1.获取工具dex2jar下载地址&#xff1a;http://sourceforge.net/projects/dex2jar/files/直接下载下载完成后&#xff0c;解压得到文件夹dex2jar-2.0jd-gui下载地址&#xff1a;http://jd.benow.ca/ 直接下载&#xff08;官网版本无法复制中文&#xff0c;可以用这个&#xff0…
阅读更多...
K8s pod 动态弹性扩缩容 HPA

K8s pod 动态弹性扩缩容 HPA

一、概述Horizontal Pod Autoscaler&#xff08;HPA&#xff0c;Pod水平自动伸缩&#xff09;&#xff0c;根据平均 CPU 利用率、平均内存利用率或你指定的任何其他自定义指标自动调整 Deployment 、ReplicaSet 或 StatefulSet 或其他类似资源&#xff0c;实现部署的自动扩展和…
阅读更多...
算法练习-二分查找(二）

算法练习-二分查找(二）

算法练习-二分查找(二&#xff09; 文章目录算法练习-二分查找(二&#xff09;1 二分查找1.1 题目1.2 题解2 猜数字大小2.1 题目2.2 题解3 寻找比目标字母大的最小字母3.1 题目3.2题解4 搜索插入位置4.1 题目4.2 题解5 在排序数组中查找元素的第一个和最后一个位置5.1 题目5.2 …
阅读更多...
34- PyTorch数据增强和迁移学习 (PyTorch系列) (深度学习)

34- PyTorch数据增强和迁移学习 (PyTorch系列) (深度学习)

知识要点 对vgg 模型进行迁移学习定义数据路径: train_dir os.path.join(base_dir, train) # base_dir ./dataset 定义转换格式: transform transforms.Compose([transforms.Resize((96, 96)), # 统一缩放transforms.ToTensor(), # 转换为tensortransforms.No…
阅读更多...
如何查找你的IP地址？通过IP地址能直接定位到你家！

如何查找你的IP地址？通过IP地址能直接定位到你家！

我们ip地址分为A、B、C、D、E共5类&#xff0c;每一类地址范围不同&#xff0c;从A到Eip地址范围依次递减&#xff0c;其中哦&#xff0c;D和E是保留地址&#xff0c;我们用不了。A、B、C3类地址很多都被美国这样的西方国家分走了&#xff0c;而留给我们的就剩有限的地址了&…
阅读更多...
记一次接口远程调用异常排查链路 Remote peer closed connection before all data could be read

记一次接口远程调用异常排查链路 Remote peer closed connection before all data could be read

前言&#xff1a; 异常信息&#xff1a; java.io.IOException: UT000128: Remote peer closed connection before all data could be read 在九月份-十月初一直都被这个问题困扰&#xff5e; 排查链路 第一次、二次、三次排查该问题&#xff1a; 当时看到”Remote peer c…
阅读更多...
支持在局域网使用的项目管理系统有哪些？5款软件对比

支持在局域网使用的项目管理系统有哪些？5款软件对比

一、选择私有部署的原因以及该方案的优点有很多可能的原因导致人们更倾向于使用私有部署的企业管理软件&#xff0c;其中一些原因可能包括&#xff1a;1.数据安全性要求&#xff1a;一些企业管理软件包含敏感的商业数据和隐私信息&#xff0c;为了保护这些信息不被未经授权的第…
阅读更多...
MyBatisPlus中的条件构造器Wrapper

MyBatisPlus中的条件构造器Wrapper

引言为什么要了解Wrapper&#xff1f;Wrapper解决的了什么问题&#xff1f;一、Wrapper&#xff1a;条件构造抽象类&#xff0c;用来解决单表操作出现的一些复杂问题,例如排序&#xff0c;和模糊查询等等结构图文字解释AbstractWrapper &#xff1a; 用于查询条件封装&#xff…
阅读更多...
java设计模式学习

java设计模式学习

一、设计模式7大原则1.单一职责原则 (Single Responsibility Principle) 在类级别和方法级别进行职责规划&#xff0c;专人专事2.开放-关闭原则 (Open-Closed Principle) 增加接口功能时&#xff0c;尽可能不要修改原有代码3.里氏替换原则 (Liskov Substitution Principle) 子类…
阅读更多...
华为HCIE学习之Openstack keystone组件

华为HCIE学习之Openstack keystone组件

文章目录一、keystone对象模型二、使用token的好处Token的实现模式1、UUID Token,每次验证需要访问keystone服务端2、PKI Token 验证&#xff0c;在客户端即可完成 发放公钥 私钥解密3、RBAC三、policy.json权限实验一、keystone对象模型 二、使用token的好处 1、token缓存在客…
阅读更多...
什么是数字化？企业如何实现数字化？

什么是数字化？企业如何实现数字化？

随着社会的发展与时代的进步&#xff0c;以生产为核心的企业也在进行不断的创新&#xff0c;而新一代信息技术的应用深化&#xff0c;制造业迎来了数字化转型新机遇。数字化转型近些年更多的被提及&#xff0c;越来越多的企业想通过数字化的转型&#xff0c;降低企业运营成本&a…
阅读更多...
《Ansible变量篇：ansible中事实变量facts》

《Ansible变量篇：ansible中事实变量facts》

一、简介 facts组件是ansible用于采集被管理机器设备信息的一个功能, 采集的机器设备信息主要包含IP地址,操作系统,以太网设备,mac地址,时间/日期相关数据,硬件信息等。 ansible有一个模块叫setup,用于获取远程主机的相关信息,并可以将这些信息作为变量在playbook里进行调用,而…
阅读更多...
【python】剑指offer代码大集合

【python】剑指offer代码大集合

剑指 Offer（第 2 版） https://leetcode.cn/problem-list/xb9nqhhg/ 剑指 Offer 03. 数组中重复的数字 https://leetcode.cn/problems/shu-zu-zhong-zhong-fu-de-shu-zi-lcof/ # 法1：哈希表（Set） class Solution:def findRepeatNumber(self, nums: [
阅读更多...
CentOS8基础篇12：使用RPM管理telnet-server软件包

CentOS8基础篇12：使用RPM管理telnet-server软件包

一、RPM包管理工具简介 RedHat软件包管理工具(RedHat Package Manager&#xff0c;RPM) RPM软件包工具常用于软件包的安装、查询、更新升级、校验、卸载以及生成.rpm格式的软件包等操作。 RPM软件包工具只能管理后缀是.rpm的软件包。软件包的命名格式&#xff1a; 软件名称…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023