webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载

webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。

这样解决整个项目打包成同一个非常大js、css，首屏加载慢。其实和我们加载百度统计代码类似，把一些js模块给独立出一个个js文件，然后需要用到的时候，在创建一个script对象，加入到document.head对象中即可，浏览器会自动帮我们发起请求，去请求这个js文件，在写个回调，去定义得到这个js文件后，需要做什么业务逻辑操作。

什么是懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时才开始加载，这就是按需加载。要实现按需加载，我们一般想到的方法：动态创建script标签，并将src属性指向对应的文件路径。

为什么需要懒加载

在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载时间。

实现过程中存在的问题：

webpcak 的按需加载已经完美解决了上述问题，但如何与webpack配合实现组件懒加载？

如何与webpack配合实现组件懒加载

webpackchunk 流

webpack配置文件中的output路径配置chunkFilename属性

output:{
path:resolve(__dirname,'dist'),
filename:'[name].js?[chunkhash]',
chunkFilename:'[name].js?[hash:5]',
publicPath:'/assets/'
},

chunkFilename路径将会作为组件懒加载的路径

webpack支持的异步加载方法

System.import()；

已废除，不推荐——webpack2官网上已经声明将逐渐废除

()=>system.import(URL)

() => import(URL)

需要webpack > 2.4，v1不支持——webpack2官网推荐使，官方文档webpack中使用import(), 属于es7范畴,

require是由webpack社区提供方案，import为es官方提供；

如果遇到使用import 报错，需要安装babelrc，需要配合babel的syntax-dynamic-import插件使用, 具体使用方法如下

npminstall--save-devbabel-corebabel-loaderbabel-plugin-syntax-dynamic-importbabel-preset-es2015

webpack babel-loader 需要配置

use:[{
loader:'babel-loader',
options:{
presets:[['es2015',{modules:false}]],
plugins:['syntax-dynamic-import']
}
}]

使用如下

//导入整个模块
import('./component').then(Component=>/*...*/);
//使用await
asyncfunctiondetermineDate(){
constmoment=awaitimport('moment');
returnmoment().format('LLLL');
}
determineDate().then(str=>console.log(str));

vue-router配置路由：vue官方文档：路由懒加载(使用import())

{
path:'/',
component:()=>import('../pages/home.vue'),
meta:{
title:'home'
}}

require.ensure

require.ensure([…modules],()=>{}[,errorCallBack[,chunkName]]);

v1和v2均可使用

require.ensure([],function(){
varmodule=require('../../jsLib/module');
//dosomething
})

require方式可以将多个模块js组合分割打包，

require下面方法ensure第一个参数是依赖，如果不需要请写[]（空数组）

而import只能将每个模块独立打包成一个js文件；

也就是说，如果现在有三个导航A、B、C，你现在用require可以将A单独分割出来做懒加载，进入a模块只请求A，B和C你可以组合在一起进行分割，进入B和C将加载共同一个文件；

component: resolve => require(['../pages/home.vue'], resolve)

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

{
//进行路由配置,规定'/'引入到home组件
path:'/',
component:resolve=>require(['../pages/home.vue'],resolve),
meta:{
title:'home'
}}

这是异步加载组件，当你访问 / ，才会加载 home.vue。

对于vue的路由配置文件(routers.js)

你可以打包的时候看看目录结构就明白了。

router中实现懒加载

vue的单页面（SPA）项目,必然涉及路由按需的问题

路由中配置异步组件

exportdefaultnewRouter({
routes:[
{
mode:'history',
path:'/my',
name:'my',
component:resolve=>require(['../page/my/my.vue'],resolve),//懒加载
},
]
})

实例中配置异步组件

components:{
historyTab:resolve=>{require(['../../component/historyTab/historyTab.vue'],resolve)},//懒加载
//historyTab:()=>import('../../component/historyTab/historyTab.vue')
},

全局注册异步组件

Vue.component('mideaHeader',()=>{
System.import('./component/header/header.vue')
})

关于webpack异步加载的问题

只要文章：

VUE2组件懒加载浅析https://www.cnblogs.com/zhanyishu/p/6587571.html

解析 Webpack中import、require、按需加载的执行过程https://segmentfault.com/a/1190000013630936

揭秘webpack按需加载原理https://zhuanlan.zhihu.com/p/159216534

vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure() https://segmentfault.com/a/1190000011519350

https://webpack.js.org/guides/code-splitting/

转载本站文章《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpackTheory/8384.html

标签 , ,

发表回复