前言
webpack打包时，默认会打包为一个chunk-vendors.js，这个通常会很大，加载速度比较慢。一般都会自己进行配置分包，将首页不需要的第三方库，单独分离出来。可以优化首屏的加载速度，减少白屏时间。
一、抽离公共模块
通过配置vue.config.js文件下，configureWebpack->optimization->splitChunks->cacheGroups属性，自定义需要分离的资源。
// vue.config.js 文件
module.exports = {
...,
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.delete('splitChunks'); // 生产环境删掉splitChunks
}
},
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: { // 缓存组
// 抽离所有入口的公用资源为一个chunk
common: {
name: 'chunk-common',
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 1,
reuseExistingChunk: true,
enforce: true
},
// 抽离noue_modules下的element
element: {
name: 'chunk-element-ui',
test: /[\\/]node_modules[\\/]element-ui[\\/]/,
chunks: 'all',
priority: 3,
reuseExistingChunk: true,
enforce: true
}
}
},
},
externals: {
zepto: 'Zepto',
...(process.env.NODE_ENV === 'production'
? {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
}
: {}),
}
};
二、配置开启gzip
开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，可以配合nginx开启
// 对匹配到的文件进行gzip压缩，配合nginx开启
const CompressionPlugin = require('compression-webpack-plugin');
config.plugins.push(
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 102, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})
)
三、接口合并
过多的接口请求会影响页面初始化时的渲染过程，可以通过增加一层中间层合并部分请求，达到加速页面展示的目的。
四、dns预解析
我们可以通过 DNS 预解析的方式提前获取 IP 地址，以缩短后续请求的响应时间。
前端可以通过 dns-prefetch 预解析，具体方式如下：
<link rel="dns-prefetch" href="//static.daojia.com" />
