文章目录
- 方案1: vue-router 懒加载
- 方案2:CDN加速
方案1: vue-router 懒加载
首次加载时资源过多导致速度缓慢问题
当SPA(单页应用程序)变得很复杂时,构建后的包会变得很大,从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载,使用较少的路由组件就不用打包进 bundles 中。
routes: [
{
name: "proposalsSign",
path: '/proposalsSign',
component: resolve => require.ensure([], () => resolve(require('@/components/proposalsSign')), 'proposalsSign'),
}, //页面1
{
name: "proposalsTemplate",
path: '/proposalsTemplate',
component: resolve => require.ensure([], () => resolve(require('@/components/proposalsTemplate')), 'proposalsTemplate'),
},//页面2
方案2:CDN加速
在index.html中,添加CDN资源
<!-- 引入Vue.js -->
<script src="https://cdn.staticfile/vue/2.4.3/vue.min.js"></script>
<!-- 引入vue-router -->
<script src="https://cdn.staticfile/vue-router/3.0.0/vue-router.min.js"></script>
在 bulid/webpack.base.conf.js 文件中,改变 externals
externals: {
'BMap': 'BMap',
'vue': 'Vue',
'element-ui': 'ELEMENT',
},
去掉所有引用:
// import ElementUI from "element-ui";
// Vue.use(ElementUI);
更多推荐
【Vue实用功能】Vue 项目首次打开加载很慢的优化方案
发布评论