npm run build 打包爬坑记(3)打包压缩优化

本文记录了在Vue2.x项目中使用Webpack4.x进行打包优化的过程,包括路由懒加载、main.js优化、代码压缩、升级Webpack、去除查看源码功能、移除console.log、警告、注释和debugger,以及解决全局样式重复引用问题,旨在提升应用性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前打包完后给后台,很好能展示出来,但是verdor很大,加载超级慢,用了路由懒加载,才好多了,但还是没有达到想要的效果,那就继续优化吧,以下是我的优化过程,有些可能不沾边或者还没解决的,欢迎留言分享,多谢

  1. 路由懒加载
    这个在npm run build 打包爬坑记第5条中已说明

  2. main.js优化思路
    这是个老话题了,项目中一般都需要引入插件,例如:mint-ui,但不能在main.js全局中直接全部引用,这样会导致很多无用的代码,所以建议尽量局部引用,自己写的各种需要引用的也一样;
    或者全局引用需要的部分,无关的能不用就不用了

  3. 压缩代码
    config/index.js中build部分:
    productionGzip: true,
    productionGzipExtensions: [‘js’, ‘css’],
    这个就是压缩,我是webpack3.x的,开启压缩就发现了好多问题,最主要的要升级到4.x,压缩完后记得让后台也开启gzip压缩

  4. 压缩代码引出的webpack3.x升级到4.x
    这是一个逼着你认识webpack的好方法,加油,我之前写过半部分,还有一些是升级过程中出现问题,只能遇见一个解决一个

  5. 线上去掉查看源码功能
    同图6:5 压缩js时:sourceMap:false

  6. 去掉console.log、警告、注释、debugger
    webpack.prod.conf中Ugli

<think>好的,用户的问题是关于如何将npm run build生成的dist文件夹恢复到源代码状态。首先,我需要明确用户的需求。用户可能在打包后想要撤销或恢复dist中的文件到原来的源代码,或者他们可能误以为dist文件是源代码的替代品,想要恢复原始项目结构。 接下来,我需要回忆一下npm run build的作用。这个命令通常用于构建项目,生成静态文件到dist目录,比如Vue或React项目。dist里面的内容一般是编译后的代码,如压缩的JS、CSS和HTML,而是源代码。因此,用户可能误解了dist的作用,认为覆盖了源代码,但其实源代码应该还在原来的目录里,比如src文件夹。 接下来,分析用户可能的错误场景。如果用户删除了源代码,只剩下dist文件,这时候恢复会比较困难,因为dist里的文件是编译后的,无法直接转回源代码。这时候可能需要数据恢复工具或版本控制系统的帮助。如果用户只是误操作,想要删除dist文件夹,那直接删除即可,会影响源代码。 然后,根据提供的引用内容,引用[4]提到npm run build用于打包项目到服务器,而源代码应该还在项目目录中。所以需要告诉用户dist和源代码的关系,可能用户担心打包后的文件覆盖了源代码,但实际上它们位于同目录。 用户可能需要了解如何正确管理源代码和构建输出。需要分步骤说明同情况下的解决方案,比如正常情况下的删除dist,或者误删源代码后的恢复方法。同时,提醒用户使用版本控制如Git来避免此类问题。 最后,生成相关问题,帮助用户进一步了解构建过程和版本管理,防止未来出现类似问题。</think>### 分步解决方案 #### 情况一:仅需删除构建产物 如果您的源代码仍然存在于项目目录中(如 `src` 文件夹),`dist` 文件夹只是构建产物,可以直接删除: 1. 手动删除 `dist` 文件夹 通过文件管理器直接移除项目根目录下的 `dist` 文件夹 2. 命令行清理 ```bash rm -rf dist/ # Linux/Mac del /s/q dist # Windows ``` #### 情况二:误删源代码需恢复 若误将源代码与 `dist` 混合或覆盖,需尝试以下方法: 1. **版本控制系统恢复**(需提前使用 Git) ```bash git restore . # 恢复所有修改 git clean -fd # 清理未跟踪文件 ``` 2. **IDE本地历史录** WebStorm/VSCode 等工具可通过右键文件选择 `Local History` 找回历史版本 3. **数据恢复软件** 使用 Recuva(Windows)、Disk Drill(Mac)等工具扫描硬盘 #### 情况三:自动化脚本优化 通过配置构建流程避免文件混乱(参考引用[3]): ```javascript // package.json 添加清理脚本 "scripts": { "clean": "rm -rf dist dist.zip", "build": "npm run clean && vue-cli-service build" } ``` ### 核心概念说明 - `dist` 是**构建输出目录**,与源代码完全隔离 - 原始代码应存储在 `src` 目录或独立模块中 - 构建过程本质是 $源代码 \xrightarrow{编译} 静态资源$ 的可逆转换[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值