问题: vue页面首次加载缓慢(空白页面),20s才能加载出来页面
解决:
1. 在前端项目中使用gzip
安装插件: npm install compression-webpack-plugin --save-dev
使用:在vue.config.js
const webpack = require('webpack') const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css']module.exports = {
configureWebpack: { devtool: 'cheap-module-source-map', // !!!这个很重要,决定性因素 plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // 配置compression-webpack-plugin压缩 new CompressionWebpackPlugin({ algorithm: 'gzip', test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), threshold: 10240, minRatio: 0.8 }), new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20, minChunkSize: 100 }) ] }
}
上图,是用完gzip压缩完之后,大概14s左右
通过控制台上看出来,chunk-xxx.js包和app.js包都是在MB以上,所以导致首页加载慢,那就想把这些chunk文件给分包
2.vue.config.js文件
// ---- chunk分包 ------ module.exports = chainWebpack: config => { // 压缩代码 config.optimization.minimize(true) // splitChunks 分包 config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { minChunks: 1, name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10 }, elementUI: { minChunks: 1, name: 'chunk-elementUI', priority: 60, test: /[\\/]node_modules[\\/]_?element-ui(.*)/, chunks: 'initial' }, eCharts: { name: 'chunk-eCharts', test: /[\\/]node_modules[\\/]_?echarts(.*)/, priority: 60, chunks: 'initial' }, zrender: { name: 'chunk-zrender', test: /[\\/]node_modules[\\/]_?zrender(.*)/, priority: 60, chunks: 'initial' }, commons: { minChunks: 2, name: 'chunk-commons', test: resolve('src/components'), chunks: 'async', priority: 1 } } }) config.optimization.runtimeChunk('single') } )}}// 拆包配合 webpack-bundle-analyzer 插件(资源包可视化占比)
1.安装:cnpm intall webpack-bundle-analyzer –save-dev
2. vue.cofig.js 使用
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginchainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) .end() }
3. 路由懒加载
1.未使用懒加载
2.使用懒加载
4.去除build的时map文件
// vue.config.js module.export = { productionSourceMap: false }
5. 终极大招!!!!!(我是换成这个属性,立马解决了懊恼三天的问题,亲测是2s打开页面)
// vue.config.js module.exports = { configureWebpack: { devtool: 'cheap-module-source-map' // 换成这个属性 } }