曾经参与过一个项目,项目还没有开发完,页面已经打不开了。 原因是没有对引入的js进行拆解,导致全部引入的js打包在了一起。2m多,然后页面一加载完就打不开了。
所以必要优化有两点:
1.对js进行拆解
2.对js与css等内容进行压缩
配置vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path')
module.exports = {
//生产路径 不在根目录下
publicPath: isProduction ? '/xx' : '/', //xx代表着在网站的根目录下的文件夹名称
lintOnSave: false,
productionSourceMap: false,
pluginOptions: {
quasar: {
treeShake: true
}
},
transpileDependencies: [
/[\\\/]node_modules[\\\/]quasar[\\\/]/
],
devServer: {
port: 8088,
proxy: {
'/api': {
target: 'http://localhost:8081',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
//webpack配置
configureWebpack: config => {
// 开启gzip压缩
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240,
minRatio: 0.8
}));
// 开启分离js
config.optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 20000,
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('@', '')}`
}
}
}
}
};
// 取消webpack警告的性能提示
config.performance = {
hints: 'warning',
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
}
}
},
}