环境 vue2
个人笔记 前端优化
webpack 优化
生产环境取消 console.log
chainWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 生产环境不适用 console.log 输出内容
// 下面一行代码无用
// config.optimization.minimizer[0].iptions.terserOptions.compress.drop_console = true
// 可以使用下面代码
config.optimization.minimizer('terser').tap((args) => {
Object.assign(args[0].terserOptions.compress, {
pure_funcs: ['console.log'],
})
return args
})
}
}
小尺寸图片转成 base64
configureWebpack: {
module: {
rules: [
// 小于 200 * 1024 (200kb) 尺寸的照片转为 base64
{
test: /\.(png|jpg|gif|webp)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 200 * 1024,
esModule: false
}
}],
type: 'javascript/auto'
},
],
}
},
使用 gzip 压缩生产环境包
plugins: isProd
? [
// 使用 gzip 压缩文件 需要后端配合 若使用 http-server 开启本地服务需要使用 http-server -g
new CompressionWebpackPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240, // 大于10kb的文件才会被压缩
deleteOriginalAssets: false, // 是否删除原文件
}),
]
: []
不生成 sourceMap 文件
// 不生成 SourceMap 文件
productionSourceMap: !isProd,
项目优化
使用图片懒加载指令
const io = new IntersectionObserver((observers) => {
observers.forEach(observer => {
if (observer.isIntersecting) {
console.log('observer', observer);
observer.target.src = observer.target.dataset.src
delete observer.target.dataset.src
io.unobserve(observer.target)
}
})
})
const lazyImg = function (el) {
io.observe(el)
}
export default lazyImg
路由懒加载
在 router.js 文件中 在顶部一次性引入所有路由的 component 文件会使得首页一次性加载所有页面组件,若使用
component: () => import('@/views/xxx/xxx.vue')
则只会加载当前页面的组件,不会一次性加载所有页面组件,从而实现路由懒加载。
使用 RequestAnimationFrame
代码在 05.vite/fiset-vite 项目中
const animation = (time) => {
if (!lastTime.value) lastTime.value = time
const abs = Math.floor(((time - lastTime.value) / needTime) * 100) / 1000
lastTime.value = time
if (process.value >= 100) {
console.timeEnd('a')
process.value = 100
cancelAnimationFrame(rafNumber.value)
return
}
process.value += abs
rafNumber.value = requestAnimationFrame(animation)
}
虚拟列表
当数据有很多时(例如超过 2000),数据会使页面渲染缓慢,此时可以使用虚拟列表,将数据分为多个块,当滚动到对应块时,才渲染对应块的数据。
代码在 05.vite/fiset-vite 项目中