webpack代码分割和懒加载

代码分割：

分离业务代码和第三方依赖

分离业务代码和业务公共代码和第三方依赖

分离首次加载和访问加载后的代码

常用的：require.ensure()

[]:denpendencies

callback

errorCallback

chunkName

首先第一步这次是代码分割和上节有变化，我们把配置变了。然后来看看，这和前面也没啥关系，新的一节

var webpack=require('webpack')
var path=require('path')module.exports={
entry:{
'pageA':'./src/pageA',
// 'pageB':'./src/pageB',
// 'vendor':['lodash']},
output:{
path:path.resolve(__dirname, './dist'),
filename:'[name].bundle.js',chunkFilename: "[name].chunk.js"
},

代码长成这样，然后打包的话。pagea有的依赖有：

import './subPageA'
import './subPageB'
import * as _ from 'lodash'
export default 'pageA'

一次性打包的话依赖非常多的文件，打包下来的文件有点大。他别是那个lodash插件的代码特别多。

大概会长成这个样子。

所以会用到上面那个require.ensure()，这是一种按需加载，webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

依赖 dependencies

这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。

回调 callback

当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。

chunk名称 chunkName

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的文件束(bundle)。这一部分是放在代码中的，也就是这样

import './subPageA'
import './subPageB'require.ensure(['lodash'],function () {var _=require('lodash')_.join(['1','2'],'3')
},'vendor')
export default 'pageA'
// dependencies:'lodash'
//callback: function()
//chunkName:vendor

然后开始打包

这里说下，打包以后就会生成两个js文件。但是pageA中依赖的两个js并不是单纯的js，他们也有共同的依赖，如果给这个共同的依赖

提出来会不会好一些了。然后开始了。

var page=subPageAif(page==='subPageA'){
require.ensure(['./subPageA'],function () {var subpageA=require('./subPageA')
},'subPageA')
}else if(page==='subPageB'){
require.ensure(['./subPageB'], function () {var subpageA=require('./subPageB')
},'subPageB')
}require.ensure(['lodash'],function () {var _=require('lodash')_.join(['1','2'],'3')
},'vendor')
export default 'pageA'

那个if逻辑没啥用的。然后看图

现在被打包成了四个。

那么对于subpageb和subpagea共同的依赖又怎么搞了，

在page.js文件的开头给她引入进来是个moduleA.js

requier.include('./moduleA')打包以后A，B都变小了，说明引入进来了。

大概就是这个样子。打包好以后的js文件效果如何了？

首先会报错，这是怎么回事了。原来要在webpack.config.js里面修改下数据。publicpath：

大概配置成这样就成了。打包好以后生成了三个js文件。

确实给我们打包好了。插件的代码，subpageA的代码，还有主代码pageA.bundle.js。

然后在subpageA中随便console.log()点代码也是能打印的。说明真的打包好了。

但是问题来了，我们还有import没有讲到，还有如何实现异步也没说。

代码修改成这个样子，然后打包，

然后结构变成这样，没有 chunkName所以变成这样。打开浏览器

然后发现import后的函数马上就执行了。以前subpageA里面的东西也还在，现在打包好的目录结构如下图

如果想添加 chunkName，在import中添加就行了

转载于:https://www.cnblogs.com/manu-yyj/p/9297429.html

webpack代码分割和懒加载相关推荐

Vue组件代码分块和懒加载
前端开发中,随着业务和页面增加,以组件为基本单位的结构下,组件数量会增长极快,为了优化我们会很显然地想要进行一些工作: 代码分块懒加载非必要资源文件非必要资源,指的首次渲染出某页面所不必要的资源, ...
代码中避免懒加载错误_网站设计中应避免的5大错误
代码中避免懒加载错误 The design of a website plays an imperative role in creating an effective and impressive ...
vue实现路由懒加载，react实现路由懒加载
组件懒加载也叫按需加载: 当打包构建应用时,js 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 打包 bui ...
vue打开html自动加载js,vue.js怎么实现懒加载
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现懒加载的方法: 一.为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异 ...
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
Android 懒加载
最近在重构公司公司的主页,其中用到了懒加载,所以找了网上的懒加载的介绍的博客,读了好几篇关于懒加载的文件,发现不是讲解太简单,就是代码不够清晰,而且在懒加载的实现原理上没有透彻的讲清楚,在实际应用实践 ...
懒加载--初步理解. by:王朋
懒加载(LazyLoad),又称为延迟加载. 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动 ...
hibernate处理懒加载异常的方法
方法一:配置过滤器,对所有的url进行处理,这样方便,快捷 1.在web.xml文件中加入下面代码  <filter ...

webpack代码分割和懒加载

webpack代码分割和懒加载相关推荐

最新文章

热门文章