首页 > 编程语言 >vue打包优化——使用webpack-parallel-uglify-plugin并行压缩JavaScript

vue打包优化——使用webpack-parallel-uglify-plugin并行压缩JavaScript

时间:2024-09-19 10:17:06浏览次数:7  
标签:vue false plugin webpack uglify parallel

1、安装插件
npm install webpack-parallel-uglify-plugin --save-dev
我用的install命令,其他命令大同小异,大家百一下就行
2、配置vue.config.js
首先引入插件:const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

这里注意我用的vue-cli构建的项目,所以修改webpack配置要放在configureWebpack里,具体配置可根据自己项目实际情况增加或者减少。
configureWebpack: {
optimization: {
minimizer: [
new ParallelUglifyPlugin({
cacheDir: '.cache/', // 缓存目录,可选
sourceMap: false, // 删除map文件
uglifyJS: {
// 这里可以配置UglifyJS的选项
output: {
comments: false, // 移除注释
beautify: false, // 不美化输出
},
warnings: false, // 不显示警告信息
compress: {
drop_console: true, // 删除console.log等调试语句
},
},
}),
],
},
},
3、npm run build看一下是不是项目小了很多!

标签:vue,false,plugin,webpack,uglify,parallel
From: https://www.cnblogs.com/chen0509/p/18419990

相关文章

  • Vue 3中的setup()函数的作用是什么?
    Vue3引入了CompositionAPI,这是一种新的组件编写方式,旨在提供更好的逻辑复用和代码组织。setup()函数是CompositionAPI的入口点,它在组件实例创建之前被调用,并且是响应式系统的上下文。本文将介绍setup()函数的作用,并使用Vue3的setup语法糖提供示例代码。setup()......
  • 路由跳转登录权限判断/vue3
    1main.ts引入路由和权限校验importrouterfrom"./router";//路由守卫权限拦截2-2import"@/router/permisstion";2router文件夹,三个文件1.1indexe.tsimport{createRouter,createWebHistory}from"vue-router";import{constRouter}from".......
  • vue3自定义指令,全局注册
    1这是directive.js注册的的importtype{Directive,DirectiveBinding}from"vue";importuseUserStorefrom"@/stores/user";import{createPinia}from"pinia";constuserStore=useUserStore(createPinia());//buttonList:["......
  • SpringBoot+Vue餐馆点菜系统小程序
    SpringBoot+Vue餐馆点菜系统小程序项目描述餐馆点菜系统小程序是一个集成了多种功能的移动应用,旨在提供用户便捷的点餐体验和餐厅高效的订单管理。以下是针对您所提到的功能的简单介绍: 前台小程序:用户通过手机上的小程序,可以浏览餐厅的菜单、选择菜品、下单并完成支付。......
  • 【VUE3.0】动手做一套像素风的前端UI组件库---Button
    目录引言做之前先仔细看看UI设计稿解读一下都有哪些元素:素材补充代码编写1.按钮四周边框2.默认状态下按钮颜色立体效果3.鼠标移入聚焦4.模拟鼠标点击效果组件封装1.按类型设置颜色2.设置按钮禁用状态3.处理一个bug4.看下整体组件效果5.完整代码总结引言......
  • python毕业设计基于django+vue软件技术代码分享交流平台设计与实现
    目录技术栈和环境说明预期达到的目标具体实现截图系统设计Python技术介绍django框架介绍flask框架介绍解决的思路性能/安全/负载方面可行性分析论证python-flask核心代码部分展示python-django核心代码部分展示操作可行性技术路线感恩大学老师和同学详细视频演示源码获取......
  • python毕业设计基于django+vue的考务管理系统的设计与实现
    目录技术栈和环境说明预期达到的目标具体实现截图系统设计Python技术介绍django框架介绍flask框架介绍解决的思路性能/安全/负载方面可行性分析论证python-flask核心代码部分展示python-django核心代码部分展示操作可行性技术路线感恩大学老师和同学详细视频演示源码获取......
  • vue一级、二级路由设计
    一、一级路由设计一级路由是指直接映射到应用程序中顶级页面或组件的路由。这些路由通常定义在VueRouter的配置中,作为应用程序导航结构的基础。直接映射:一级路由直接映射到URL路径和Vue组件,没有嵌套关系。顶级导航:它们通常用于应用程序的顶级导航,如首页、关于页面、用户中心......
  • 基于Springboot+vue的音乐网站
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了音乐网站的开发全过程。通过分析音乐网站管理的不足,创建了一个计算机管理音乐网站的方案。文章介绍了音乐网站的系统分析部分,包括可行性分析等,系统设计部分主要介绍了系统功能......
  • 基于nodejs+vue的校园学生成绩管理系统的设计与实现(源码+LW+调试文档+讲解等)
    博主介绍: ......