Vue——项目打包优化

vue项目打包出来的文件有点大,如何将其优化呢
UglifyJS Webpack Plugin插件用来缩小(压缩优化)js文件

1、安装uglifyjs-webpack-plugin

npm i uglifyjs-webpack-plugin --save-dev

2、在vue.config.js文件中配置

const UglifyJsPlugin = require('uglifyhjs-webpack-plugin');
let isProduction = process.env.NODE_ENV;

module.exports = {
	//....
	configureWebpack:config => {
		//生产环境相关配置
		if(isProduction == 'production'){
			//代码压缩
			config.plugins.push(
				new UglifyJsPlugin({
					uglifyOptions:{
						//生产环境自动删除console
						warnings:false,
						compress:{
							//warnings:false,//若打包错误,则注释这行
							drop_debugger:true,
							drop_console:true,
							pure_funcs:['console.log']
						}
					},
					sourceMap:false,
					parallel:true	
				})
			)
		}
	}
}

3、配置完成后,再执行npm run build打包

npm run build
### Vue 2 项目打包配置及教程 #### 1. 环境准备 在开始打包之前,需要确保本地环境已安装 Node.js 和 npm 或 yarn。可以通过以下命令检查版本: ```bash node -v npm -v ``` 如果尚未安装 Vue CLI 工具,则需先全局安装它: ```bash npm install -g @vue/cli ``` 对于 Vue 2 的项目,默认会有一个 `vue.config.js` 文件用于自定义 Webpack 配置[^1]。 --- #### 2. 默认打包流程 Vue CLI 提供了一个简单的命令来执行项目打包操作: ```bash npm run build ``` 该命令会在项目根目录下生成一个名为 `dist` 的文件夹,其中包含了所有经过优化后的静态资源文件(HTML、CSS、JavaScript)。这些文件可以直接部署到任何支持静态资源托管的服务提供商上[^1]。 --- #### 3. 自定义打包配置 为了满足更复杂的需求,可以创建或修改 `vue.config.js` 文件来进行个性化设置。以下是几个常见的配置项: ##### (1) 设置公共资源基础路径 当应用被部署在一个子路径而非根域名时,可通过调整 `publicPath` 参数实现适配: ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/sub-path/' : '/' }; ``` 此处 `/sub-path/` 应替换为目标服务器上的实际地址前缀[^1]。 ##### (2) 修改输出目录名称 默认情况下,构建产物会被放置于 `dist` 文件夹内;若希望更改此位置,可指定新的目标路径: ```javascript const path = require('path'); module.exports = { outputDir: path.resolve(__dirname, './build-output') }; ``` ##### (3) 添加第三方插件支持 某些场景可能需要用到额外的功能扩展模块,在这种情形下就需要引入相应的插件并注册它们: ```javascript const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionWebpackPlugin({ algorithm: 'gzip', test: /\.(js|css|html)$/, threshold: 10240, minRatio: 0.8 }) ] } }; ``` 以上例子展示了如何启用 Gzip 压缩功能以减少传输大小。 --- #### 4. 使用 Vite 替代传统方式 随着技术的发展,Vite 成为了新一代快速冷启动工具链代表之一,并且同样适用于 Vue 2 项目。其核心优势在于利用 ES Module 动态导入特性显著提升了开发体验速度。下面是一个典型的 vite 配置实例[^2]: ```javascript import { defineConfig } from 'vite'; import vue2 from '@vitejs/plugin-vue2'; export default defineConfig({ base: './', // 打包的静态资源引用路径 plugins: [vue2()], resolve: { alias: { '@': '/src' } }, }); ``` 注意这里的关键点是必须单独安装兼容 Vue 2 版本的插件——即 `@vitejs/plugin-vue2`。 运行下列指令即可完成初始化过程以及后续编译工作: ```bash npm init vite-app my-vue2-project && cd $_ npm i --save-dev @vitejs/plugin-vue2 npm run dev # 开发模式服务 npm run build # 生产环境打包 ``` --- #### 5. 后端集成与部署方案 针对前后端分离架构的应用程序来说,除了单纯上传前端页面之外还需要考虑 API 接口调用等问题。一种常见做法就是借助 Express 搭建简易 HTTP Server 来承载整个业务逻辑[^4]: 示例代码片段如下所示: ```javascript const express = require('express'); const app = express(); // 将 dist 中的内容作为静态资源提供给客户端访问 app.use(express.static(path.join(__dirname, 'dist'))); // 定义简单接口返回 JSON 数据结构 app.get('/api/userInfo', function(req, res){ res.json({ username:'testUser'}); }); // 监听特定端口号等待请求到来触发回调函数处理事件流 app.listen(3000,function(){ console.log('Express server listening on port 3000.'); }); ``` 最终把上述脚本保存成独立入口文件比如命名为 `server.js`, 并通过 PM2 这样的进程管理器长期保持在线状态从而对外暴露服务能力. ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值