首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏coding for love

    4-3~8 code-splitting,懒加载,预拉取,预加载

    参考 https://webpack.js.org/guides/code-splitting/#root https://www.webpackjs.com/guides/code-splitting

    1.9K20发布于 2020-02-25
  • 来自专栏『学习与分享之旅』

    webpack-代码分割

    Code-Splitting (代码分割) 概述默认情况下 webpack 会将所有引入的模块都打包到一个文件中例如 JS 最终都会打包成一个 bundle.js, 这样就导致了打包后的文件比较大, 以及修改文件后用户又需要重新下载所有打包内容问题 图片解决方案将不经常修改的内容打包到另一个文件中, 这样每次修改后用户就只用下载修改后的文件, 没有被修改的文件由于用户上一次打开已经缓存在了本地就不用下载了, 这样性能也提升了, Code-Splitting 开启 Code-Splitting在讲解开启 Code-Splitting 之前先来看看没有配置的效果:index.jsimport $ from 'jquery';$('html').css({ width optimization: { splitChunks: { chunks: 'all' }},webpack 自动分割文档地址:https://webpack.js.org/guides/code-splitting

    48510编辑于 2023-09-28
  • 来自专栏Cellinlab's Blog

    Vue-router 基础用法

    name: 'Home', component: Home, }, { path: '/admin', name: 'admin', // route level code-splitting views/404.vue'), } # 嵌套路由 // router/index.js { path: '/admin', name: 'admin', // route level code-splitting

    29720编辑于 2023-05-17
  • 来自专栏TopFE

    vue项目中 页面组件懒加载 使用webpackChunkNmae

    name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting

    59030编辑于 2022-01-24
  • 来自专栏Java

    vue与jwt验证

    vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'login', // route level code-splitting views/login/LoginView.vue') }, { path: '/register', name: 'register', // route level code-splitting views/register/RegisterView.vue') }, { path: '/index', name: 'index', // route level code-splitting

    49900编辑于 2025-01-21
  • 来自专栏coding for love

    4-8 打包分析

    简介 上一节4-3~8 code-splitting,懒加载,预拉取,预加载 讲到如何对代码进行 code splitting。 参考 https://webpack.js.org/guides/code-splitting/#bundle-analysis

    47330发布于 2020-03-20
  • 来自专栏黯羽轻扬

    React 16.6新API

    一.概览 新增了几个方便的特性: React.memo:函数式组件也有“shouldComponentUpdate”生命周期了 React.lazy:配合Suspense特性轻松优雅地完成代码拆分(Code-Splitting = newProps; } return rendered; } } 手动实现的这个盗版与官方版本功能上等价(甚至性能也不相上下),所以又一个锦上添花的东西 三.React.lazy: Code-Splitting 性能及实现方面的原因,建议换用新Context API P.S.暂时还能用,但将来版本会去掉,可以借助StrictMode完成迁移 七.总结 函数式组件也迎来了“shouldComponentUpdate”,还有漂亮的Code-Splitting

    99370发布于 2019-06-12
  • 来自专栏云瓣

    打包优化实践(如何Code Spliting)

    参考文献 code-splitting Code-Splitting(react)

    1.5K20发布于 2018-10-11
  • 来自专栏测试开发真货

    从零搭建一个django项目-4.2-vue项目学习

    'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting

    73620编辑于 2022-06-13
  • 来自专栏数据分析与挖掘

    vuejs之vue和springboot后端进行通信

    name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting

    1.4K10发布于 2020-08-26
  • 来自专栏全栈码

    webpack构建了不相关的文件夹

    route.meta.noLazyload){ return import('src/'+route.comppath); }else{ // route level code-splitting

    86720发布于 2019-05-16
  • 来自专栏Czy‘s Blog

    Vue-Cli4笔记

    查阅 此处 了解如何指定浏览器范围 代码拆分 // route level code-splitting // this generates a separate chunk (about

    56440发布于 2020-08-27
  • 来自专栏一只想做全栈的猫

    【前端芝士树】Vue - 路由懒加载 - 实践所遇问题摘记

    component: Home }, { path: '/about', name: 'about', // route level code-splitting

    46910编辑于 2022-05-06
  • 来自专栏友人a的笔记丶

    《千锋最新前端webpack5》学习笔记,持续记录

    的配置:https://webpack.docschina.org/concepts/output/ 1.代码分离: 相关文档:https://webpack.docschina.org/guides/code-splitting -1-17晚上 前提:代码分离(代码拆分)一般是指抽离共同的代码,动态导入是使用时才会动态加载JS, 1.动态导入 相关文档:https://webpack.docschina.org/guides/code-splitting 3.预获取、预加载 相关文档:https://webpack.docschina.org/guides/code-splitting/#prefetchingpreloading-modules link

    1.6K10编辑于 2023-02-17
  • 来自专栏黯羽轻扬

    React Suspense

    一.代码拆分 前端应用达到一定规模时(比如bundle size以MB为单位),势必面临代码拆分的强需求: Code-Splitting is a feature supported by bundlers 之间没有组件层级关系上的强关联,能够灵活控制loading粒度 通用:支持等待异步数据时显示降级组件(loading只是一种最常见的降级策略,fallback到缓存数据甚至广告也不是不可以) 参考资料 Code-Splitting

    1.7K70发布于 2019-06-12
  • 来自专栏功能测试

    技术分享 | 测试平台开发-前端开发之Vue router路由设计

    component: Home // 关联组件 }, { path: '/about', name: 'About', // route level code-splitting

    1.3K40编辑于 2022-04-19
  • 来自专栏coding个人笔记

    性能知识点二

    使用 Tree-shaking、Scope hoisting、Code-splitting

    37620发布于 2020-04-23
  • 来自专栏京程一灯

    Webpack3来了!

    To learn more information, see our newest documentation guide on code-splitting that highlights these

    69540发布于 2019-03-28
  • 来自专栏Web技术学苑

    介绍几个不太常用的打包分析工具

    分析包数据 最实用的还是webpack-bundle-analyzer用得比较多点 参考资料 [1]bundle-analysis: https://webpack.docschina.org/guides/code-splitting

    86010编辑于 2022-07-28
  • 来自专栏ionic3+

    Vue+Ionic4,知虎偏行(二)创建及配置项目

    component: Home }, { path: '/about', name: 'about', // route level code-splitting

    4.7K41发布于 2019-07-10
领券