vue路由懒加载
按需加载一定要规范好css!!!
vue/cli3官网示例
把组件按组分块
把
import school from '@/views/school.vue'
换成
const school= () => import('@/views/school.vue')
这样就会每一个组件就会对应生成一个js文件,按需加载
此外,还需要在vue.config.js中配置
// 去除插件
chainWebpack(config) {
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
其他
去掉.map文件
vue.config.js中配置
//不生成.map文件
productionSourceMap: false,
分析文件大小来源
安装 webpack-bundle-analyzer 插件
安装完成后直接在vue.config.js中添加
chainWebpack(config) {
// 对应package里的判断条件
if (process.env.npm_config_report) {
config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
}
}
在package.json中添加
"analyze": "npm_config_report=true npm run build",
这里的npm_config_report对应process.env.npm_config_report的判断,只有执行npm run analyze时才生成分析结果
本以为到这里就结束了可以运行了,但是不巧。。。报错了
查了一下资料知道,以上合并两条命令(这种操作在powershell中不被支持,在cmd中也不被支持,这是Mac中bash或Linux的shell中的独特操作,拆分脚本如下:
"analyze": "set npm_config_report=true && npm run build",
运行成功
展示编译后的文件大小及各部分内容大小。以下是项目在优化前的分析结果:
第三方库懒加载
把第三方库放到单独一个组件里也可以实现按需加载
ssr服务器端渲染
vue的gzip压缩
压缩之后体积将大大缩小,右边箭头是压缩后的体积
使用webpack插件 compression-webpack-plugin
在 vue.config.js中配置
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 启动gzip压缩
configureWebpack: config => {
// 开发环境不需要gzip
if (process.env.NODE_ENV !== 'production') return
config.plugins.push(
new CompressionWebpackPlugin({
// 正在匹配需要压缩的文件后缀
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大于10kb的会压缩
threshold: 10240
})
)
}
运行build就会得到压缩后的.gz文件了
配置全局css变量
使用scss时,配置全局css变量
vue.config.js中配置
css: {
loaderOptions: {
sass: {
data: `
@import "@/assets/scss/style.scss";
`
}
}
},
配置之后可在所有vue文件中使用scss变量
可用于更换不同主题