极客观点
项目管理
HarmonyOS
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
...
把 fuse.js依赖删了 好了 有点坑