dist打包后经常遇到包过大,有的甚至超过10M等,这会导致我们项目在首次进入时,由于资源加载过多而导致页面白屏的情况,针对这种情况,我们可以对以下几个方便进行优化
一、设置productionSourceMap
在vue.config.js文件中,设置productionSourceMap为 false;表示生产环境不生成sorce map文件(source map 就是资源地图。其作用就是定位,用于定位浏览器控制台输出语句在项目文件的位置,以便于出现问题时快速找到问题位置。)
module.exports = {
productionSourceMap: false
}
二、使用插件 compression-webpack-plugin( 顾名思义:对webpack打包文件进行压缩,达到减小包体积,提升访问速度的效果)
1.安装插件
npm install compression-webpack-plugin -D
2. 配置vue.config.js文件
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
chainWebpack: config => {
if (isProduction) {
config.plugin('compression-webpack-plugin').use(new CompressionWebpackPlugin({
test: /\.(js|css|scss)$/, // 匹配文件名
threshold: 20480, // 对超过20k的数据压缩
minRatio: 0.8,
deleteOriginalAssets: true // 删除源文件
}))
}
},
}
注意安装后使用过程中可能会报错,大致原因是因为版本不匹配造成,所以安装时最好指定版本 npm install compression-webpack-plugin@6.x -D
3.使用CDN加载常用资源图片等
1.对于常用的图片,可以放到cdn上进行访问,其一是可以减小打包体积;其二是通过cdn访问可以减轻服务器压力,提升性能
2.常用资源使用cdn配置,编辑vue.config.js文件
// 忽略生成环境打包的文件
var externals = {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element': 'Element',
'moment': 'moment',
};
// 设置CND相关css和js地址
const cdn = {
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.6/vue-router.global.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0/vuex.global.min.js',
'https://cdn.bootcss.com/element-ui/2.8.2/index.js',
'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js',
],
css: [
'https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css',
]
}
module.exports = {
// 扩展cdn
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
config.externals(externals)
}
3.在public下index.html中引入
<!-- cdn方式引入插件 -->
<% if (process.env.NODE_ENV === 'production') { %>
<% if (htmlWebpackPlugin.options.cdn.css) { %>
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%=css%>" rel="preload" as="style">
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
<% } %>
<% if (htmlWebpackPlugin.options.cdn.js) { %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%=js%>" rel="preload" as="script">
<script src="<%=js%>"></script>
<% } %>
<% } %>
<% } %>
4.使用路由懒加载(需要用到某个页面时,才去加载路由,减少一进首页就加载全部资源,造成首页加载缓慢)
具体方式 一:使用 import
component: () => import(‘xxxxx’) // 组件路径
方式二: 使用require
component: resolve => require(['xxx 组件路径'], resolve)