优化三步骤:去掉了jeecg的online,然后取消预加载,再然后拆包看看还有其他的了吗,在然后可以开启gizp压缩
1、vue中取消预加载
module.exports = {
// 移出prefetch 插件
config.plugins.delete('prefetch')
}
2、拆分依赖包(目的是为了去掉jeecg-boot没有用到的包)
configureWebpack: config => {
//生产环境取消 console.log
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}else {
config.optimization = {
runtimeChunk: "single",
splitChunks: {
chunks: "all",
// maxInitialRequests: Infinity,
minSize: 0, // 依赖包超过20000bit将被单独打包
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
}
}
}
},
};
}
},
npm run 起来就会发现是这样的,不用部署去
3、vue-cli3安装webpack-bundle-analyzer分析包文件(专家看的,先留在这)
转自:https://blog.csdn.net/maquealone/article/details/99674246 ,怕消失掉,收藏 != 学会
cnpm install webpack-bundle-analyzer -D
修改vue.config.js
module.exports = {
chainWebpack: config => {
if (process.env.use_analyzer) { // 分析
config
.plugin('webpack-bundle-analyzer')
.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
}
修改package.json
"scripts": {
"analyzer": "use_analyzer=true npm run serve"
},
然后运行npm run analyzer。但是我运行后发现报错了。如下:
原来由于windows下不支持xxx=xxx这种写法。为了支持这种写法,用npm安装cross-env。然后修改package.json,如下:
"analyzer": "cross-env use_analyzer=true npm run serve"
再次运行npm run analyzer,发现运行成功,打开127.0.0.1就可以看到包的情况:
注:上述已是优化后看到的图,未优化前,element-ui和v-charts占用了很大的控件。针对这两个插件做了优化后(采用CDN方式),app.js小了很多。
留在这做个警示
$ npm install uglifyjs-webpack-plugin --save-dev
4、gzip压缩
npm install -D compression-webpack-plugin
const CompressionPlugin = require("compression-webpack-plugin");
...
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production';
// 将每个依赖包打包成单独的js文件
...
if(openGzip){
config.plugins = [
...config.plugins,
new CompressionPlugin({
test:/\.js$|\.html$|.\css/, //匹配文件名
threshold: 10240,//对超过10k的数据压缩
deleteOriginalAssets: false //不删除源文件
})
]
}
} else {
// 为开发环境修改配置...
config.mode = 'development';
}
...
},
注:生成的压缩文件以.gz为后缀,一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件,还需要对服务器进行配置,根据Request Headers的Accept-Encoding标签进行鉴别,如果支持gzip就返回.gz文件。