介绍一款神器,webpack-bundle-analyzer(帮助我们查看各个模块的大小),只需要在webpack.prod.conf.js中加上下面一段,然后npm run build --report就可以了
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
第一步优化:图片懒加载 安装插件vue-lazyload 详情参考官网:https://github.com/hilongjw/vue-lazyload
在main.js中设置以下代码
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
Vue.use(VueLazyload, {
preLoad: 1.0, //图片 设置显示比列 默认为1.3
error: require('../static/img/timg.gif'),
loading: require('../static/img/timg.gif'),
attempt: 1
})
第二步优化:路由懒加载
{
path: '/EnterpriseServe',
component: resolve => require(['@/pages/serve/EnterpriseServe.vue'],resolve),
meta: {
title: "企业服务",
active: "/EnterpriseServe"
}
},
{
path: '/PersonageServe',
component: resolve => require(['@/pages/serve/PersonageServe.vue'],resolve),
meta: {
title: "个人服务",
active: "/PersonageServe"
}
},
第三步优化:在webpack.prod.conf.js配置uglifyjs-webpack-plugin(vue-cli已经帮我们装好了)
new UglifyJsPlugin({
uglifyOptions: {
compress: {
unused: true, //是否去掉未关联的函数和变量
warnings: false, //是否去除警告
pure_funcs: ['console.log'], //去掉所有console语句
reduce_vars: true //弄忘记了^_^
}
},
sourceMap: true, //将错误消息位置映射到模块(会减慢编译速度)
parallel: true //多通道并行处理
}),
第四步优化:cdn外部加载第三方包
//在index.html中配置
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
//在webpack.base.conf.js里配置
externals: {
'vue' : 'Vue',
'vue-router': 'VueRouter',
'jquery': '$',
'echarts': 'echarts'
},
//这样写可以去掉import引入
第五步优化:懒加载子组件
shareTop: () => import('../components/share-top.vue').then(component => {
component.default._Ctor = {}
if (!component.default.attached) {
component.default.backupMounted = component.default.mounted
}
component.default.mounted = function() {
if (component.default.backupMounted) {
component.default.backupMounted.call(this)
}
}
component.default.attached = true
return component
}),
以上是个人的一些方法,希望能对大家有一点用处,也希望能和大家一起多多学习,共同进步