1.图片懒加载
//使用vue-lazyload
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
<div id="container">
<img v-for="item in imgs" v-lazy="item.url">
<img v-for="item in imgs" v-lazy:background-image="item.url">
</div>
2.路由懒加载
//Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：
// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')
const router = createRouter({
// ...
routes: [{ path: '/users/:id', component: UserDetails }],
})
3.组件懒加载
export default {
components: {
historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载
},
}
4.打包配置分模块chunk
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000, //文件的最小体积，小于该体积则不拆分
maxSize: 0, //拆分之前最大的数值，默认为0，即不做限制
minChunks: 1, //引入次数，根据该模块的引入次数决定是否分离chunk
name: true,
}
}
};
5.压缩css，js
const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
module.exports = {
plugins: [
// 压缩输出的 JS 代码
new UglifyJSPlugin({
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 `console` 语句，可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true,
},
output: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
}
}),
],
};
6.小图使用url-loader转为base64，减少服务器资源请求
yarn add -D url-loader || npm install url-loader -D
module: {
rules: [
{
test: /\.(jpeg|jpg|png|svg|gif)$/, //处理哪些图片格式
use: {
loader: 'url-loader', // 默认使用的是es6模块
options: { // 配置
esModule: false, // 使用common.js规范
outputPath: 'images', // 输出的文件目录
name: 'images/[contenthash:4].[ext]', //contenthash，webpack文件后缀hash值的一种类型，也是最常用的，以文件内容作为hash，可以防止文件未修改而多余重新打包或者修改后未重新打包的问题。
limit: 20*1024 // 小于20k转为base64
}
}
}
]
}
[name]/[chunkhash]/[contenthash]
7.配置第三方UI组件按需引入
这里以elementUI示例
主要使用babel-plugin-component插件
8.使用骨架屏或者loading效果降低白屏负效应
9.开始服务器gzip请求，加快资源响应
打包时需要将资源进行gzip压缩，也需要配置项目所在的服务器，因为默认服务器不解压静态资源。
参考配置
10.关闭生产环境的soureMap，减少代码体积
module.exports = {
productionSourceMap:false
}
11.使用ssr服务端渲染，提高首屏加载速度。
这里可以选择使用nuxt框架。
或者将vue项目结合node自己进行ssr改造
12.使用cdn加速，将打包后的文件上传至cdn服务器，示例：webpack-alioss-plugin //此服务需要购买阿里云服务器方可使用
const WebpackAliossPlugin = require('webpack-alioss-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: isProduction ? '//res.xueboren.com/auto_upload_ci/your-project-name/' : '',
configureWebpack: {
plugins: isProduction ? [
new WebpackAliossPlugin(),
] : [],
},
};
