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

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',

// 模板来源

template: 'public/index.html',

// 在 dist/index.html 的输出

filename: 'index.html',

},

// 当使用只有入口的字符串格式时，

sub: {

// page 的入口

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

// 模板来源

template: 'public/sub.html',

// 在 dist/index.html 的输出

filename: 'sub.html',

},

},

// eslint-loader是否在保存的时候检查

lintOnSave: false,

runtimeCompiler: true,

transpileDependencies: [],

productionSourceMap: false,

configureWebpack: config => {

if (process.env.NODE_ENV === 'production') {

// 为生产环境修改配置...

return {

/* happypack */

module: {

rules: [

{

test: /\.js$/,

//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行

loader: 'happypack/loader?id=happyBabel',

//排除node_modules 目录下的文件

exclude: /node_modules/

},

]

},

externals,

plugins: [

new HappyPack({

//用id来标识 happypack处理那里类文件

id: 'happyBabel',

//如何处理 用法和loader 的配置一样

loaders: [{

loader: 'babel-loader?cacheDirectory=true',

}],

//共享进程池

threadPool: happyThreadPool,

//允许 HappyPack 输出日志

verbose: true,

})

],

}

} else {

// 为开发环境修改配置...

return {

/* happypack */

module: {

rules: [

{

test: /\.js$/,

//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行

loader: 'happypack/loader?id=happyBabel',

//排除node_modules 目录下的文件

exclude: /node_modules/

},

]

},

externals,

plugins: [

new HappyPack({

//用id来标识 happypack处理那里类文件

id: 'happyBabel',

//如何处理 用法和loader 的配置一样

loaders: [{

loader: 'babel-loader?cacheDirectory=true',

}],

//共享进程池

threadPool: happyThreadPool,

//允许 HappyPack 输出日志

verbose: true,

})

],

}

}

},

// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

chainWebpack: config => {

config

.plugin('provide')

.use(webpack.ProvidePlugin, [{

Api: resolve('src/api/Api.js'),

Util: resolve('src/utils/js/index.js'),

// Img: resolve('src/utils/imgs/imgs.js'),

// R: 'ramda'

}])

.end()

if (process.env.use_analyzer) {

config

.plugin('webpack-bundle-analyzer')

.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

.end()

}

// set svg-sprite-loader

config.module

.rule('svg')

.exclude.add(resolve('src/icons'))

.end()

config.module

.rule('icons')

.test(/\.svg$/)

.include.add(resolve('src/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

})

.end()

config

.when(process.env.NODE_ENV === 'development',

config => {

config.devtool('cheap-source-map')

}

).end()

config

.when(process.env.NODE_ENV !== 'development',

config => {

config

.plugin('ScriptExtHtmlWebpackPlugin')

.after('html')

.use('script-ext-html-webpack-plugin', [{

// `runtime` must same as runtimeChunk name. default is `runtime`

inline: /runtime\..*\.js$/

}])

.end()

config

.optimization.splitChunks({

chunks: 'all',

cacheGroups: {

libs: {

name: 'chunk-libs',

test: /[\\/]node_modules[\\/]/,

priority: 10,

chunks: 'initial' // only package third parties that are initially dependent

},

elementUI: {

name: 'chunk-elementUI', // split elementUI into a single package

priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app

test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm

},

commons: {

name: 'chunk-commons',

test: resolve('src/components'), // can customize your rules

minChunks: 3, // minimum common number

priority: 5,

reuseExistingChunk: true

}

}

})

.end()

}

)

},

// css相关配置

css: {

// 启用 CSS modules

modules: false,

// 是否使用css分离插件

// extract: true,

// 开启 CSS source maps?

sourceMap: false,

// css预设器配置项

loaderOptions: {

sass: {

data: `@import "@/styles/_util.scss";`

}

},

},

// webpack-dev-server 相关配置

devServer: {

// 设置热替换

disableHostCheck: true,//webpack4.0 开启热更新

// 设置页面引入

inline: false,

port: 8080,

// https: false,

open: false,

proxy: {

[process.env.VUE_APP_API_PREFIX_URL]: {

target: process.env.VUE_APP_API_PROXY_URL,

changeOrigin: true,

ws: true,

pathRewrite: {

[process.env.VUE_APP_API_PREFIX_URL]: ''

},

}

},

},

}

每次都是卡在70% 70%-100% 要26秒多

.env.development

VUE_APP_API_PREFIX_URL = /api

VUE_APP_API_BASE_URL = /xxx

VUE_APP_UPLOAD_URL = /xxx

VUE_APP_SOCKET_URL = /xxx

...