参考 https://webpack.js.org/guides/code-splitting/#root https://www.webpackjs.com/guides/code-splitting
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
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
name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting
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
简介 上一节4-3~8 code-splitting,懒加载,预拉取,预加载 讲到如何对代码进行 code splitting。 参考 https://webpack.js.org/guides/code-splitting/#bundle-analysis
一.概览 新增了几个方便的特性: React.memo:函数式组件也有“shouldComponentUpdate”生命周期了 React.lazy:配合Suspense特性轻松优雅地完成代码拆分(Code-Splitting = newProps; } return rendered; } } 手动实现的这个盗版与官方版本功能上等价(甚至性能也不相上下),所以又一个锦上添花的东西 三.React.lazy: Code-Splitting 性能及实现方面的原因,建议换用新Context API P.S.暂时还能用,但将来版本会去掉,可以借助StrictMode完成迁移 七.总结 函数式组件也迎来了“shouldComponentUpdate”,还有漂亮的Code-Splitting
参考文献 code-splitting Code-Splitting(react)
'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting
name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting
route.meta.noLazyload){ return import('src/'+route.comppath); }else{ // route level code-splitting
查阅 此处 了解如何指定浏览器范围 代码拆分 // route level code-splitting // this generates a separate chunk (about
component: Home }, { path: '/about', name: 'about', // route level code-splitting
的配置: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
一.代码拆分 前端应用达到一定规模时(比如bundle size以MB为单位),势必面临代码拆分的强需求: Code-Splitting is a feature supported by bundlers 之间没有组件层级关系上的强关联,能够灵活控制loading粒度 通用:支持等待异步数据时显示降级组件(loading只是一种最常见的降级策略,fallback到缓存数据甚至广告也不是不可以) 参考资料 Code-Splitting
component: Home // 关联组件 }, { path: '/about', name: 'About', // route level code-splitting
使用 Tree-shaking、Scope hoisting、Code-splitting。
To learn more information, see our newest documentation guide on code-splitting that highlights these
分析包数据 最实用的还是webpack-bundle-analyzer用得比较多点 参考资料 [1]bundle-analysis: https://webpack.docschina.org/guides/code-splitting
component: Home }, { path: '/about', name: 'about', // route level code-splitting