业务需要，从A网站跳转到B网站，网站加载慢，白屏时间有十几秒，影响用户体验，对项目进行了优化
技术栈：vue2+webpack
1、vue-router路由懒加载
// 1、Vue异步组件技术：
{
path: '/home',
name: 'Home',
component: resolve => require(['../views/home.vue'], resolve)
}
// 2、es6提案的import()
{
path: '/',
name: 'home',
component: () => import('../views/home.vue')
}
// 3、webpack提供的require.ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('../views/home.vue')), 'home')
}
2、cdn资源优化，
可以将vue，vue-router, vuex, axios等这些全家桶，改成cdn引入,同时vue.config.js引入进行修改
// index.html
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>
// vue.concong.js 配置externals属性
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}
3、通过webpack gzip压缩文件，同时ngixn配置gzip压缩
gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率
// 先安装 npm install compression-webpack-plugin --D
// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(
new CompressionPlugin({
// gzip压缩配置
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
})
)
}
}
4、webpack-bundle-analyzer
利用webpack-bundle-analyzer分析大文件，找出内鬼，逐个优化
// 先安装 npm install webpack-bundle-analyzer -D
// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
...其它
configureWebpack: [
plugins: [
new BundleAnalyzerPlugin() // 分析打包大小使用默认配置
]
},
}
执行npm run build会自动打开服务，可以看到js大小
1.jpg
1.文件可以通过cdn引入,版本要对应
2.ant-design 按需引入
3.代码压缩，需要服务端配合
5、splitChunks 代码分割
config.optimization.splitChunks({ // 代码分割
cacheGroups: {
common: {
name: 'chunk-common', // 打包后的文件名
chunks: 'all', // 共有3个值"initial"，"async"和"all"。配置后，代码分割优化仅选择初始块，按需块或所有块
minChunks: 2, // (默认值：1）在拆分之前共享模块的最小块数
maxInitialRequests: 5, //（默认值为3）入口点的最大并行请求数
minSize: 0, // （默认值：30000）块的最小大小
priority: 1, // 数字越大优先级越高 （-10大于-20）
reuseExistingChunk: true // 允许在模块完全匹配时重用现有的块，而不是创建新的块。
},
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
priority: 2,
reuseExistingChunk: true,
enforce: true
},
antDesignVue: {
name: 'chunk-ant-design-vue',
test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
chunks: 'all',
priority: 3,
reuseExistingChunk: true,
enforce: true
}
}
})
2.png
6、移除preload&prefetch
// vue.config.js
chainWebpack: config => {
// 移除 prefetch预取 插件
config.plugins.delete('prefetch')
// 移除 preload 预加载 插件 避免加载多余的资源
config.plugins.delete('preload')
}
网友评论