vue3 编译很慢_vue-cli3 开发编译时间太长

针对Vue3项目使用vue-cli3时遇到的编译慢问题,本文探讨了如何通过配置happypack、调整webpack设置以及外部化依赖等方法来优化编译时间。在项目包含400多个文件,每次保存编译耗时20多秒的情况下,通过修改vue.config.js文件,尤其是利用HappyPack加速babel编译,减少编译过程中的瓶颈,以提升开发效率。
摘要由CSDN通过智能技术生成

vue-cli3 单页项目

文件大概 400多个

保存一次 编译要20多秒

怎么优化打包配置

每次都是从这里开始卡

vue.config.js

/*

happypack

*/

const HappyPack = require('happypack');

const os = require('os');

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

/*

*/

const externals = {

vue: "Vue",

vuex: "Vuex",

"vue-router": "VueRouter",

"element-ui": "ELEMENT"

}

const path = require('path');

const webpack = require('webpack');

function resolve(dir) {

return path.join(__dirname, dir)

}

module.exports = {

// 基本路径

publicPath: process.env.NODE_ENV === 'production' ?

'./' :

'/',

// 输出文件目录

// outputDir: 'dist', // 默认dist

// 用于嵌套生成的静态资产(js,css,img,fonts)目录

// assetsDir: '',

// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径

// indexPath: 'index.html', // Default: 'index.html'

filenameHashing: true,

// 构建多页时使用

pages: {

index: {

// page 的入口

entry: 'src/pages/index/main.js',

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值