1.借助工具排查项目中占用包较大的部分,然后相应解决
vue-cli2.0 自带 webpack-bundle-analyzer 工具,可直接执行 npm run build --report,打包结束后会生成如下图视图分析
vue-cli3 需要做相应安装配置后方可使用
(1) 首先安装依赖 npm install webpack-bundle-analyzer --save-dev
(2) 在 vue.config.js
中添加如下配置
//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": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"analyzer": "cross-env use_analyzer=true npm run build"
},
}
注:window可能需要先执行 npm install cross-env --save 安装 cross-env
以上配置完成后直接执行 npm run analyzer 就可以了
2. vue-route 加载方式优化
加载方式有多种,这里仅提供2种方式
(1) 路由懒加载
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/login', name: 'login', component(resolve) { require(['@pages/login'], resolve) },
meta: { title: '登录' }
},
...
]
})
(2) 路由异步加载(模块划分)
import Router from 'vue-router'
Vue.use(Router)
var router = new Router ({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/login',
name: 'login',
component: r => require.ensure([], () => r(require('@pages/login.vue')), 'Login'),
meta: { title: '登录' }
},
{
path: '/model',
name: 'model',
component: r => require.ensure([], () => r(require('@pages/model.vue')), 'Model'),
meta: { title: '模块' },
children: [
{
path: '/model1',
name: 'model1',
component: r => require.ensure([], () => r(require('@pages/model1.vue')), 'Model'),
meta: { title: '模块1' }
},
...
]
}
]
})
export default router;
3. 在webpack打包的过程中,将多余文件去掉,如map文件
vue-cli2: build/webpack.base.conf.js
vue-cli3: vue.config.js
productionSourceMap: false,
4. CDN加速
把那些不太可能改动的代码或者库分离出来,继续减小单个chunk-vendors,然后通过CDN加载进行加速加载资源
// vue-cli2 配置
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge({
...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'mint-ui': 'MINT',
"echarts": "echarts",
'ali-oss': 'OSS',
},
...
})
// vue-cli3 配置
module.exports = {
...
configureWebpack: config => {
config.externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'mint-ui': 'MINT',
"echarts": "echarts",
'ali-oss': 'OSS',
},
...
},
...
}
注意:CDN本身的加载也会影响首屏加载速度(特别是对于国外的网站),可查找相关CDN提供网站(如https://www.bootcdn.cn/,http://staticfile.org/ 等),可对比斟酌后使用;
好用分享:影响首屏加载速度的因素很多,对于网络和请求方面,可通过抓包工具(如Charles)查看具体影响的位置和原因(如cdn,js,css,接口等)
5. 服务器和webpack打包同时配置Gzip
Gzip是GNU zip的缩写,顾名思义是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩,然后传递给浏览器,浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后,我们前端需要提供资源压缩包,通过Compression-Webpack-Plugin插件build提供压缩
(1) 安装插件
webpack版本为3.x时,需要安装低版本插件: npm install --save-dev compression-webpack-plugin@1.1.12 ,否则会报错
webpack版本为4.x以上,可直接安装 npm install --save-dev compression-webpack-plugin
(2) 代码配置
// vue-cli2
const vuxLoader = require('vux-loader')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = vuxLoader.merge({
...
},{
plugins: [
'vux-ui',
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false //是否删除源文件(默认)
})
]
})
注意:在config/index.js中需要配置
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
// vue-cli3
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ["js", "css"];
module.exports = {
....
configureWebpack: config => {
config.plugins = ....,
config.plugins.push(new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: 'gzip',
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false //是否删除源文件(默认)
}))
}
}
此方向需要服务器端配合完成相关配置才能生效,参照 https://blog.csdn.net/qq_37653449/article/details/85101227 (根据自身需要做相应配置)
更多优化方式参照:https://juejin.im/post/5d9ff02df265da5baf4104d9