前后端分离开发，我用这几个技巧让页面加载速度提高了 90%
前言
分析
v
如果是 vuecli 3 的话，先安装插件
cnpm intall webpack bundle analyzer save dev然后在 vue.config.js 中对 webpack 进行配置
chainWebpack: (config) => {/* 添加分析工具*/if (process.env.NODE_ENV === 'production') {if (process.env.npm_config_report) {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin).end();config.plugins.delete('prefetch')}} }
再运行 npm run build --report
路由懒加载
当
在 router.js 文件中，原来的静态引用方式
import ShowBlogs from '@/components/ShowBlogs'routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
改为
routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')参考官网的做法：
设置完毕后，首屏就只会加载当前页面路由的组件了
element-ui按需加载
import ElementUI from 'element-ui'Vue.use(ElementUI)
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';Vue.use(Button)Vue.use(Input)Vue.use(Pagination)Vue.prototype.$alert = MessageBox.alert
plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
import { Table, TableColumn } from "element-ui";components: {"el-table": Table,"el-table-column": TableColumn },
组件重复打包
配置
minChunks: 3首和灰色部分。
拆了半天，又回到原点
gzip
拆完包之后，我们再用 gzip 做一下压缩 安装 compression-webpack-plugin
cnmp i compression-webpack-plugin -D在 vue.congig.js 中引入并修改 webpack 配置
const CompressionPlugin = require('compression-webpack-plugin')configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...config.mode = 'production'return {plugins: [new CompressionPlugin({test: /\.js$|\.html$|\.css/, //匹配文件名threshold: 10240, //对超过10k的数据进行压缩deleteOriginalAssets: false //是否删除原文件})]}}
使用
const compression = require('compression')app.use(compression())
注
最终效果
首屏加载资源 198k，加载时间 1s，相比原来速度提升了 90%
后记：css是否要拆分
vuecli 3 和 vuecli2.x 还有一个区别是
-
vuecli 3会默认开启一个 css 分离插件 ExtractTextPlugin
我们可以在 vue.config.js 中关闭它
css: {// 是否使用css分离插件 ExtractTextPluginextract: false,// 开启 CSS source maps?sourceMap: false,// css预设器配置项loaderOptions: {},// 启用 CSS modules for all css / pre-processor files.modules: false},
所以，是否要 css 具体分析吧。
总结
性能优化是
1、
2、
3、
4、
5、
6、
7、
8、
9、
喜欢就点个"在看"呗^_^