Vue打包优化之code spliting-06

import('@/components/login') const router = new VueRouter({ routes: [

{ path: '/login', component: login }

] }) 还有一种魔法注释用法

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/ webpackChunkName: "group-foo"/ './Foo.vue') 3.异步组件 如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同

// template

// script components: {

test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包

}, methods:{

clickTest () {
      this.showTest = !this.showTest
}

} 4.图片的压缩合并 无损压缩图片:https://tinypng.com/

如有可能,将图片制作成精灵图

5.CDN加速 在index.html中引入cdn资源

...

原文链接:segmentfault.com

上一篇:Vue打包优化之code spliting-04
下一篇:Vue源码笔记 — 数据驱动--update

相关推荐

官方社区

扫码加入 JavaScript 社区