目录
优化前
优化后
主要操作
-
分离模块，启用多页模式
本来blog 模块时直接和后台写一起的，打包的时候也一起打包，导致有些前台不需要的资源也加载了
-
拆包
之前是用vue默认的打包，发现第一个页面加载就会把所有资源都加载完毕，这在后台页面倒是没太大关系。到了手机和前台页面，过多的资源会严重影响加载速度。移除了preload和perfetch，尽可能减少首屏加载的资源。
经过学习，发现preload和perfetch的影响可能有限
-
elementUI开启按需加载
之前懒，直接全部引入，在首屏就尴尬了，加载了一堆不需要的资源。按需处理后，从164k的包直接变成43k。
分享下多页vue的vue.config.js
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = 'loading' // page title
const glob = require('glob')
function getEntry(url) {
let entrys = {}
glob.sync(url).forEach(item => {
// splice(-3)取数组后三项
let urlArr = item.split('/').splice(-3)
entrys[urlArr[1]] = {
entry: 'src/pages/' + urlArr[1] + '/' + 'index.js',
template: 'src/pages/' + urlArr[1] + '/' + 'index.html',
filename: urlArr[1] + '.html',
title: 'loading',
chunks: ['chunk-vendors', 'chunk-common',urlArr[1],'manifest']
}
})
return entrys
}
let pages = getEntry('./src/pages/**?/*.html')
const IS_VENDOR = /[\\/]node_modules[\\/]/;
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
pages,
lintOnSave: process.env.NODE_ENV === 'development',
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
disableHostCheck: true,
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
extensions: [".js", ".vue", ".json", ".css"],
alias: {
'@': resolve('src'),
'@@': resolve('src/pages')
}
},
plugins: plugins
},
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
Object.keys(pages).forEach(name => {
config.plugins.delete(`preload-${name}`)
config.plugins.delete(`prefetch-${name}`)
});
config.optimization.delete("splitChunks");
// 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
.optimization.splitChunks({
chunks: 'initial',
// minSize:2000,
name: true,
cacheGroups: {
vendors: {
name: 'chunk-vendors',
priority: -10,
chunks: 'initial',
minChunks: 2,
test: IS_VENDOR,
enforce: true,
},
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
},
common: {
name: 'chunk-common',
priority: -20,
chunks: 'initial',
minChunks: 2,
enforce: true,
},
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk({name: 'manifest'})
}
)
},
runtimeCompiler: true,
publicPath: process.env.NODE_ENV === 'production'
? '/pages/'
: '/pages/',
assetsDir: process.env.NODE_ENV === 'production'
? 'static'
: '',
outputDir: '../../public/pages',
productionSourceMap:false,
filenameHashing:true
}