【Vue】项目打包的时候,build.js文件过大,可以通过设置懒加载或者按照路由分模块加载进行打包
2018-03-27 09:57
1146 查看
一、路由懒加载
1、当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
const Foo = () => import('./Foo.vue')
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })
二、把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
相关文章推荐
- vue项目打包之后js文件过大怎么办?
- 使用vue打包时vendor文件过大或者是app.js文件很大的问题
- nginx 配置后网站图片或js 加载出来一半或者不出来刷新才可以,chrome 浏览器访问项目时加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH:
- 通过DOS、SHELL批处理命令加载Lib并编译和打包Java项目(或者运行项目)
- React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)
- react项目实战(权限模块开发八)js文件分开打包
- RequireJs按需要加载angular模块和依赖,并且用r.js压缩打包js和css文件实现加载优化(图文)。
- myeclipse 项目中jsp或者js 文件中的错误是没必要处理的,可以忽略
- vue创建项目build的文件夹下没有dev-server.js文件了,怎么mock数据?
- linux下 /etc/hosts.allow和/etc/hosts.deny两个文件是控制远程访问设置的,通过他可以允许或者拒绝
- IOS博客项目搭建-04-对文件按照功能模块结构、MVC进行分层
- vue2.0 配置build项目打包目录、资源文件(assets\static)打包目录
- vue项目通过webpack打包生成的dist文件放到express里边运行(vue+webpack+express)
- 16.如何做到webpack打包vue项目后,可以修改配置文件
- javaWeb项目修改css或者js文件后,浏览器却不能加载新版本
- 基于vue-cli npm run build之后vendor.js文件过大的解决方法
- 使用Tomcat部署项目在浏览器中访问的时候JS和CSS等静态文件无法加载的问题
- 解决vue-cli npm run build之后vendor.js文件过大的问题
- 如何降低Vue.js项目中Webpack打包文件的大小?